javascript - 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回调来强制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'
        }
);