Fancybox 1.3.4-重新加载后无覆盖

Question

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

1. 用户读取ajax带来的数据，并关闭fancybox。
2. 用户是AFK。 当输入其他数据时，应将其附加到已经显示的fancybox内容中

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

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

  </div>
</div>

其中notifications_fancybox display: none; 在CSS中。

我只想要$('#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回调来强制将overlay的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'
        }
);