В моем скрипте попап закрывается кликом по закрывающей кнопке .close:
$('.popup-post-modal-open').bind('click', DimaPopup);
$('.popup-background').bind('click', Popupclose);
function DimaPopup(e){
e.preventDefault();
$('.popup-loader').css('display', 'block');
if (e.target.className.indexOf("gapplayer-wrapper")>=0||e.target.className.indexOf("fvp-dynamic")>=0){
e.stopPropagation();
return false;
}
var url = $(this).attr('href');
// А вот так просто меняется ссылка
if(url != window.location){
window.history.pushState(null, null, url);
}
$('.popup-post').addClass('active');
window.setTimeout(function(){$('.popup-post').scrollTop(0);},50);
$('body').addClass('active');
$('html').css('overflow', 'hidden');
window.offScroll = false;
$('.popup-post').off('scroll').on('scroll',function(){
if ((this.scrollTop + $(this).height() + 50)>this.scrollHeight&&!window.offScroll){
window.offScroll = true;
}})
$.ajax(
{
type : 'POST',
url : 'http://' + location.host + '/wp-admin/admin-ajax.php',
data: { action: 'popup_post', popup_post_id:$(this).parents('.title').children('.post-click-popup').children('span').text()
},
success: function(data){
$('.post-generat-content').eq(0).html(data);
$('.popap-loader').css('display', 'none');
$('.popup-background').css('display', 'block');
window.setTimeout(function(){
if (gapStart) gapStart();},1000);
var elem = $('.popup-post');
$('html, body').animate({ scrollTop: elem.offset().top }, 750);
var tempScrollTop = 50, currentScrollTop = 0;
var top1;
$('.popup-post.active').scroll(function(){
currentScrollTop = $(this).scrollTop();
if (tempScrollTop < currentScrollTop ){ //Скролим вниз
$('.vverh').attr('style', 'display:block;');
$('.vniz').attr('style', 'display:none;');
tempScrollTop = currentScrollTop;
top1 = currentScrollTop;
} else if (tempScrollTop > currentScrollTop ) { //Скролим вверх
$('.vverh').attr('style', 'display:none;');
$('.vniz').attr('style', 'display:block;');
tempScrollTop = currentScrollTop;
}
});
$('.vniz').click(function(){
$('.popup-post.active').animate({ scrollTop: top1 }, '50');
});
$('.vverh').click(function(){
$('.popup-post.active').animate({ scrollTop: $('.post-generat-content').offset().top }, '50');
});
$('.close').bind('click', Popupclose);
//window.setTimeout(function(){$('.popup-post').scroll();},1000);
},
error: function(error)
{
console.log('Ошибка');
}
});
}
var window_location = window.location.href;
function Popupclose() {
$('.popup-background').css('display', 'none');
$('.popup-post').removeClass('active');
window.history.pushState(null, null, window_location);
$('body').removeClass('active');
$('html').css('overflow', 'auto');
}
Сам .popup-post.active растянут на всю ширину экрана и только он имеет скролл В нем есть блок, в который загружается содержание попап и этот блок в виде попап окна, а растянутый .popup-post.active становится визуально фоном для него
То есть получается, блок .popup-background находится позади .popup-post.active и закрывать попап при клике на .popup-background не получится из-за отсутствия контакта с ним Он у меня создает только цвет фона позади .popup-post.active
И вот если повесить закрытие окна при клике на .popup-post.active то закрываться будет, но тогда загрываться будет и при клике на подгружаемую область с информацией, а это очень не нужно Там надо иметь возможность любого контакта, а при клике вне его закрывать все это (попап)
Пробовал растянуть кнопку .close на весь экран, что позволяет думать, что закрывать попап при клике на всю область позади него, но тогда не работает скролл..
Все это
здесь
При клике на ссылку поста откроется попап
Воооот Че делать? )
Спасибо за внимание
