/*=POPUP=*/
.popup-bg {
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
z-index: 110;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0,0,0,0.75);
}
.popup {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: 475px;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.popup-content {
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
padding: 40px 45px 30px;
background-color: #c0d5c8;
}
.popup-close {
position: absolute;
top: 23px;
right: 17px;
width: 14px;
height: 14px;
background-image: url("../img/ico-close.png");
background-repeat: no-repeat;
cursor: pointer;
-webkit-transition: @trans;
-moz-transition: @trans;
-o-transition: @trans;
transition: @trans;
&:hover, &:active, &:focus {
background-image: url("../img/ico-close-hover.png");
}
}
<a class="btn btn-default js-popup-open" href="#" data-href="#request-call-popup"></a>
<!--POPUP-->
<div id="" class="popup-bg">
<div class="popup">
<div class="popup-content">
<p class="js-popup-close popup-close"></p>
</div>
</div>
</div>
//popup
var overlay = $('div.popup-bg'),
popup = $('div.popup'),
closePopup = $('.js-popup-close'),
openPopup = $('.js-popup-open');
$(openPopup).click(function (e) {
e.preventDefault();
var href = $(this).attr('data-href');
$(href).fadeIn();
});
$(document).mouseup(function (e) {
var div = $(popup);
if (!div.is(e.target) && div.has(e.target).length === 0) {
$(overlay).fadeOut();
}
});
$(closePopup).click(function () {
$(this).closest(overlay).fadeOut();
});
$(document).keyup(function(e) {
if (e.which === 27) {
$('#status-popup').fadeOut();
}
});