如何锁定fancybox覆盖而不跳到顶部?

时间:2013-10-28 13:55:13

标签: javascript iframe fancybox-2

我想在打开fancybox时禁用浏览器滚动。下一个代码可以工作:

helpers: {
   overlay: {
      locked: true 
   }
},

但是在移动设备上,窗口会在fancybox打开时跳到顶部。此行为取决于locked:true param。如何锁定叠加并防止跳跃?

不同的决定,例如:

$('html').css('overflow', 'hidden')

$(document.body).bind('touchmove', function(e) {
   e.preventDefault();
   e.stopPropagation();
   e.returnValue = false;
});

可以使用,但不适用于所有移动浏览器!

1 个答案:

答案 0 :(得分:0)

我也不得不处理这个问题,这让我很生气。我尝试了几乎所有选项,在stackoverflow上搜索所有问题和答案,但似乎没有任何东西可以用于我的ajax-lightbox。我总是跳到顶端。然后我做了以下事情:

$(".lightboxe-fancyboxWindow").fancybox({ 
    type : 'ajax',
    href : "<?php echo $_SERVER['PHP_SELF']; ?>",
    ajax: {
        type: "POST",
        data: {     
            'data1' : information1,
            'data2' : information2
        },
    },
    autoSize: false,
    width: '60%',
    beforeShow : function() {
        $("body").css({"overflow" : "hidden", "padding-right" : "17px"});
    },
    afterClose: function () {
        $("html, body").removeAttr("style");
    },
    titleShow : false,
    helpers : { 
        overlay : {
            locked : false
        },
         title : null
    },
});

我所做的是为17px添加隐藏在正文标记上的溢出和fake-scrollbar填充。