Здравствуйте, нужна помощь. На сайте есть всплывающее окно, мне нужно, чтобы человек не смог закрыть его нажав за пределы этого окна.
;(function() {
var overlay = document.getElementById('overlay'),
mOpen = document.querySelectorAll('[data-modal]'),
mClose = document.querySelectorAll('[data-close]'),
outer = document.querySelector('.modal-outer'),
modals = document.querySelectorAll('.modal-outer > div'),
duration = 400,
mStatus = false,
h = null;
if (mOpen.length == 0) return;
setTopOuter();
function setTopOuter() {
outer.style.top = -outer.offsetHeight + 'px';
}
[].forEach.call(mOpen, function(el) {
el.addEventListener('click', function(e) {
var modalId = el.getAttribute('data-modal'),
modal = document.getElementById(modalId);
modalShow(modal);
});
});
[].forEach.call(mClose, function(el) {
el.addEventListener('click', modalClose);
});
document.addEventListener('keydown', modalClose);
function modalShow(modal) {
mStatus = true;
overlay.classList.remove('fadeOut');
overlay.classList.add('fadeIn');
modal.style.display = 'block';
var start = new Date().getTime(),
startTop = outer.getBoundingClientRect().top,
finalTop = (window.innerHeight - outer.offsetHeight) / 2,
offset = outer.offsetHeight + finalTop;
var fn = function() {
var now = new Date().getTime() - start,
currTop = Math.round(startTop + offset * now / duration);
currTop = (currTop > finalTop) ? finalTop : currTop;
outer.style.top = currTop + 'px';
if (currTop < finalTop) {
requestAnimationFrame(fn);
}
}
requestAnimationFrame(fn);
window.addEventListener('resize', setTopOpenOuter);
}
function modalClose(event) {
if (mStatus && ( !event.keyCode || event.keyCode === 27 ) ) {
mStatus = false;
var start = new Date().getTime(),
startTop = outer.getBoundingClientRect().top,
finalTop = -outer.offsetHeight,
offset = outer.offsetHeight + (window.innerHeight - outer.offsetHeight) / 2;
var fn = function() {
var now = new Date().getTime() - start,
currTop = Math.round(startTop - offset * now / duration);
currTop = (currTop < finalTop) ? finalTop : currTop;
outer.style.top = currTop + 'px';
if (currTop > finalTop) {
requestAnimationFrame(fn);
} else {
overlay.classList.remove('fadeIn');
overlay.classList.add('fadeOut');
[].forEach.call(modals, function(modal){
modal.removeAttribute('style');
});
}
}
requestAnimationFrame(fn);
window.removeEventListener('resize', setTopOpenOuter);
}
}
function setTopOpenOuter() {
outer.style.top = (window.innerHeight - outer.offsetHeight) / 2 + 'px';
}
})();
var win_top = 0;
$(document).ready(function(){
// открываем модальное окно при клике по контенту
$('#list').click(function(){
popup_open('#myPopup');
})
// открываем модальное окно через 1,5сек после загрузки страницы
setTimeout(function() {
popup_open('#myPopup');
}, 2000);
// Добавляем обработчик закрытия модального окна
$(document).on('click', '.popup .close, .overflow', function(){
popup_close()
return false;
})
})
function popup_open(selector){
if (selector.length){
win_top = $(window).scrollTop();
$('#list').css({
'position' : 'fixed',
'left' : '0',
'right' : '0',
'top' : '0',
// Добавляем смещение, чтобы на фоне была именно та часть, что просмаривал пользователь
'margin-top': '-'+win_top+'px'
})
$('.overflow,'+selector).fadeIn();
}
}
function popup_close(){
$('.overflow, .popup').hide();
$('#list').css({
'position' : 'static',
'margin-top': '0px'
})
// Возвращаем скролл на место
$(window).scrollTop(win_top);
}
<div class="overflow">
<!-- Затемнение -->
</div>
<div class="popup" id="myPopup">
<a href="#" class="close"></a>
<div class="popup_title">Модальное окно</div>
</div>
/*Затемнение */
.overflow{
background: rgba(0, 0, 0, 0.7);
position:fixed;
top: 0px;bottom: 0px;
left: 0px;right: 0px;
z-index:100;
display:none;
}
/* модальное окно */
.popup{
position:absolute;
z-index:101;
background: #ffffff;
width: 435px;
min-height: 226px;
margin-left: -218px;
padding: 20px;
top: 10%;
left: 50%;
display:none;
border: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.popup .close{
position:absolute;
top: 10px;
right: 10px;
display:block;
width: 17px;
height: 17px;
opacity: 0.5;
background: url(../img/close.png) no-repeat center;
-webkit-transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
transition:opacity 0.5s;
}
.popup .close:hover{
opacity: 0.8;
}