.popup-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
}
.popup {
position: absolute;
background: #ffffff;
width: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 30px;
padding-top: 60px;
}
.popup form {
display: flex;
flex-direction: column;
}
.popup form input {
margin-bottom: 30px;
height: 50px;
font-size: 20px;
border: 2px solid #000000;
}
.popup form input[type="submit"] {
background: #000000;
color: #ffffff;
font-size: 24px;
}
.close-popup {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.no-scroll {
overflow-y: hidden;
}
CSS
$('.open-popup').click(function(e) {
e.preventDefault();
$('.popup-bg').fadeIn(800);
$('html').addClass('no-scroll');
});
$('.close-popup').click(function() {
$('.popup-bg').fadeOut(800);
$('html').removeClass('no-scroll');
});
.
