[Fancybox 2.1加载AJAX模板,顶部留有很大的空白,但是当我以其他方式使用Fancybox时,不会发生此问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Fancybox 2.1加载AJAX模板,顶部留有很大的空白,但是当我以其他方式使用Fancybox时,不会发生此问题相关的知识,希望对你有一定的参考价值。

在我的电子商务网站上,当有人单击添加到购物车按钮时,我正在使用Fancybox加载购物车。这没有问题。页面不会在后台跳到顶部,并且模式购物车窗口始终显示在中心,或者在页面高度不足时显示在顶部。此购物车模式中只有Top: 20px,不能再向上滚动。

这是我用于Fancybox模态购物车的代码(效果很好):

(function ($, F) {

    // Opening animation - fly from the top
    F.transitions.dropIn = function() {

        var endPos = F._getPosition(true);

        endPos.top = (parseInt(endPos.top, 10) - 50) + 'px';
        endPos.opacity = 0;

        F.wrap.css(endPos).show().animate({
            top: '+=50px',
            opacity: 1
        }, {
            duration: F.current.openSpeed,
            complete: F._afterZoomIn
        });
    };

    // Closing animation - fly to the top
    F.transitions.dropOut = function() {
        F.wrap.removeClass('fancybox-opened').animate({
            top: '-=50px',
            opacity: 0
        }, {
            duration: F.current.closeSpeed,
            complete: F._afterZoomOut
        });
    };

}(jQuery, jQuery.fancybox));

$(".cart-button").fancybox({
maxWidth    : 700,
maxHeight   : 600,
fitToView   : false,
width       : '100%',
height      : '70%',
autoSize    : false,
autoDimensions: false,
autoCenter : true,
closeClick  : false,
openMethod:'dropIn',
openSpeed:200,
closeMethod:'dropOut',
closeSpeed:200,
helpers : {
  overlay : {
      locked : true // try changing to true and scrolling around the page
  }
}
});

现在,我需要以另一种方式使用Fancybox,其中包括单击按钮时通过AJAX加载页面模板。与模式购物车不同,此页面模板足够长,以致始终超出可见页面的高度。问题在于,它一直将Top: 632px(变量)分配给Fancybox模态,然后在顶部留下一个大的空白点。也就是说,它确实在屏幕顶部显示了Fancybox模态,顶部显示了20px的空间(例如购物车),但是,用户可以继续向上滚动以查看顶部的600 + px的空白空间(在该空间中看到了深色的覆盖层)。这个问题似乎只发生在台式机上,因为它在移动设备上的表现还不错。

这是我用于通过Fancybox加载模板的代码:

$(document).ready(function() {
  $(".trees-modal-button").click(function(e) {
    e.preventDefault();
    $.fancybox({
        maxWidth    : 700,
        maxHeight   : 600,
        fitToView   : false,
        width       : '100%',
        height      : '70%',
        autoSize    : false,
        autoDimensions: false,
        autoCenter : true,
        closeClick  : false,
        openMethod:'dropIn',
        openSpeed:200,
        closeMethod:'dropOut',
        closeSpeed:200,
        helpers : {
          overlay : {
              locked : true // try changing to true and scrolling around the page
          }
        },
        content: `<div class="loading-directive" style="display: block; position: relative; margin: 
        auto;">
         <div class="loader">
           <svg class="circular">
            <circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
            </circle>
           </svg>
         </div>
       </div>`
      });

    $.get('/pages/tree-planting-temp-noindex', null, function(data) {
        $.fancybox({
          maxWidth  : 700,
          maxHeight : 600,
          fitToView : false,
          width     : '100%',
          height        : '70%',
          autoSize  : false,
          autoDimensions: false,
          autoCenter : true,
          closeClick    : false,
          openMethod:'dropIn',
          openSpeed:200,
          closeMethod:'dropOut',
          closeSpeed:200,
          content: data,
          helpers : {
            overlay : {
                locked : true // try changing to true and scrolling around the page
            }
          }
        });
      }
    )
  })
}) 

它首先打开带有加载动画的模式弹出窗口,然后在准备好后显示模板。我使用了与购物车相同的Fancybox变量,所以我不确定是什么问题。

值得一提的是,如果我强制CSS为Top: 20px来覆盖Fancybox模态生成的较大值,则该模态将弹出至页面的顶部,然后您必须向上滚动以查看顶部模态。

非常感谢您的帮助。

答案

考虑使用代码笔或类似工具会很有用,但是在没有这种情况的情况下,我的建议是仅触发$.fancybox()打开一次,而仅更新灯箱的内容。您也可以选择更新尺寸。

如果初始加载微调灯箱位置正确,并且仅在内容加载时出现错误,这可以解决您的问题。

如果加载微调器显示不正确,则可以通过完全删除ajax部分来代替SO问题,而可以添加更多有关css以及灯箱显示后要加载哪些内容的信息。

$(document).ready(function() {
  $(".trees-modal-button").click(function(e) {
    e.preventDefault();
    $.fancybox({
      maxWidth    : 700,
      maxHeight   : 600,
      fitToView   : false,
      width       : '100%',
      height      : '70%',
      autoSize    : false,
      autoDimensions: false,
      autoCenter : true,
      closeClick  : false,
      openMethod:'dropIn',
      openSpeed:200,
      closeMethod:'dropOut',
      closeSpeed:200,
      //helpers : {
        //overlay : {
          //locked : true // try changing to true and scrolling around the page
        //}
      //},
      content: `<div class="loading-directive" style="display: block; position: relative; margin: auto;">
       <div class="loader">
         <svg class="circular">
          <circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
          </circle>
         </svg>
       </div>
     </div>`
    });

    $.get('/pages/tree-planting-temp-noindex', null, function(data) {
      $.fancybox({content:data});

      // optional height resize with
      // $.fancybox.update()
    })
  })
}) 

如果仍不能解决问题,请尝试将以下内容添加到初始的fancybox首选项:

  padding: 0,
  helpers: {
    overlay: {
    locked: false
  }

以上是关于[Fancybox 2.1加载AJAX模板,顶部留有很大的空白,但是当我以其他方式使用Fancybox时,不会发生此问题的主要内容,如果未能解决你的问题,请参考以下文章

在AJAX调用后附加到Flexslider后,无法使用Fancybox打开图像

jquery fancybox 只显示 ajax 内容的第一行

防止fancybox返回页面顶部

FancyBox iFrame 元素上的绑定事件

fancybox图片弹窗显示插件跳到页面顶部问题

在另一个fancybox ajax 上打开fancybox