HTML
<div class="flex">
<div class="modalcontainer">
<div class="flex">
<div class="modal">
<div class="close"><span>+</span></div>
<div class="content">
<h2>Modal title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris turpis ex, tempus ut purus eget, molestie tempus turpis. Vestibulum eu lobortis augue, condimentum pulvinar tortor. Nulla convallis sed dui in volutpat. Maecenas et sapien vel sapien pellentesque blandit. Aliquam vitae enim viverra, semper turpis vel, dignissim massa. Maecenas nisi lorem, semper ut iaculis sed, tristique quis ipsum. Aliquam non consequat eros.</p>
</div>
<div class="buttons">
<a href="#0">Cancel</a>
<a href="#0">Accept</a>
</div>
</div>
</div>
</div>
<a href="#0" class="modalbttn">Open Modal</a>
</div>
SCSS
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600";
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
a {
color: #FFF;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
body {
padding: 0px;
margin: 0;
font-family: "Source Sans Pro", sans-serif;
background: #00c3ff;
background: -webkit-linear-gradient(to left, #00c3ff , #ffff1c);
background: linear-gradient(to left, #00c3ff , #ffff1c);
}
h2 {
margin-top: 0px;
color: #4d5c6e;
font-weight: 400;
}
p {
color: #72879e;
font-size: 16px;
line-height: 24px;
}
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.flex {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.modalcontainer {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.modalcontainer.active {
display: block;
}
.modal {
display: none;
position: relative;
width: 600px;
height: 330px;
background-color: #FFF;
border-radius: 4px;
overflow: hidden;
}
.modal.active {
display: block;
}
.modal .content {
padding: 30px;
}
.modal .close {
font-family: "Source Sans Pro", sans-serif;
cursor: pointer;
color: #FFF;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
right: 0;
color: #999;
font-size: 40px;
}
.modal .close span {
transform: rotate(45deg);
display: block;
}
.modal .buttons {
width: 600px;
position: absolute;
bottom: 0;
height: 50px;
background-color: #FFF;
}
.modal .buttons a {
width: 50%;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
background-color: #EEE;
color: #4d5c6e;
transition: 0.3s;
text-transform: uppercase;
font-weight: bold;
}
.modal .buttons a:hover {
background-color: #e1e1e1;
}
.modal .buttons a:nth-of-type(2) {
float: right;
color: #FFF;
background-color: #33a775;
}
.modal .buttons a:nth-of-type(2):hover {
background-color: #00a75f;
}
.modalbttn {
background-color: #24252A;
padding: 12px 25px;
text-transform: uppercase;
letter-spacing: 2px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
border-radius: 4px;
transition: all 0.3s;
}
.modalbttn:hover {
background-color: #2b2c32;
}
JAVASCRIPT
$(".modalbttn").click(function() {
$(".modalcontainer").fadeIn("slow");
$(".modal").fadeIn("slow");
});
$(".close").click(function() {
$(".modalcontainer").fadeOut("slow");
$(".modal").fadeOut("slow");
});
$(".buttons").click(function() {
$(".modalcontainer").fadeOut("slow");
$(".modal").fadeOut("slow");
});
