Question

我正在开发一个ajax弹出系统。其中一个功能是，当ajax收集任何新数据时，使用Fancybox显示它。有两种情况：

用户读取ajax带来的数据，然后关闭fancybox。
用户是AFK。当另一个数据进入时，它应追加以显示已经显示的fancybox内容

我的fancybox的html容器如下所示：

<div id="notifications_fancybox">
  <div class="notifications_fancybox_title">
    Powiadomienia
  </div>
  <div id="notifications_fancybox_content">

  </div>
</div>

其中notifications_fancybox在css中有display: none;。

拳头我只想$('#otifications_fancybox_content').append('some html');附加一些数据，但似乎在fancybox初始化之后，它不会让我附加任何东西。

所以我找到了另一种方法：

当有新数据出现时，首先检查fancybox是否已经打开：

nl.isFancyboxOpened = function(){
    if($('#fancybox-wrap').is(':visible')) return true;
    return false;
};

如果打开，请关闭它：

if(nl.isFancyboxOpened()){
    $.fancybox.close();
}

附加一些数据

$('#otifications_fancybox_content').append('some html');

并打开fancybox

nl.openFancybox = function(){   
    if(nl.isFancyboxOpened() == false){
      $.fancybox(
        $('#notifications_fancybox').html(),
        {
          'autoDimensions'            : false,
          'overlayShow'               : true,
          'hideOnOverlayClick'        : false,
          'showCloseButton'           : true,
          'width'                     : 450,
          'height'                    : 400,
          'transitionIn'              : 'none',
          'transitionOut'             : 'none'
        }
      );

    }
    else{
      $.fancybox.resize();
    }
};

现在，主要问题：当第一次显示fancybox时，一切都很好 - 有叠加，按钮等。

当更多的ajax数据显示出来并且我尝试通过上面的程序（close-append-reopen）时，一切看起来都很好，除了......没有叠加！所以用户可以点击页面上的所有内容，我不希望他这样做。

Answer 1

好的，我已经设法解决了这个问题。不完全是我想要的，但我会工作得很好。

我的解决方案使用onComplete回调强制将叠加层的display属性设置为block。它包含在setTimeout中，因为立即调用它将无效。在一定时间内减少超时也会导致此解决方案失败。我相信有更好的方法可以解决这个问题，但我还没有找到...但是;）

$.fancybox(
        $('#notifications_fancybox').html(),
        {
          'autoDimensions'            : false,
          'overlayShow'               : true,
          'hideOnOverlayClick'        : false,
          'showCloseButton'           : true,
          'onComplete'                : function(){setTimeout(function(){$('#fancybox-overlay').css('display', 'block');}, 250);},
          'width'                     : 450,
          'height'                    : 400,
          'transitionIn'              : 'none',
          'transitionOut'             : 'none'
        }
);

Fancybox 1.3.4 - 重新加载后没有重叠

1 个答案: