Question

我正在尝试显示阻止界面（模态）但没有叠加的“ajax加载器对话框”。

这是我初始化对话框的方式：

  $("<div></div>").dialog({
         modal: true,
         dialogClass: "noOverlayDialog",
         autoOpen: false, //opened later
         ...
  });

我添加了以下CSS来隐藏叠加层：

.ui-dialog.noOverlayDialog + .ui-widget-overlay { opacity: 0 !important; }

然而，当我调用dialog("open")时，覆盖闪烁然后消失，就像我使用Javascript隐藏它一样。使用display:none;或visibility:hidden的效果相同。

为了确保它是移除叠加层的css，而不是其他东西，我删除了css行，而且现在总是可以看到叠加层。

为什么会这样？我认为静态CSS不应该有这种行为，并且应该立即隐藏叠加层而不用闪光灯。

如果我找不到直观的解决方案，也许另一种方法是将模态选项设置为false以防止叠加在一起，然后编写代码以获取模态行为。无论哪种方式，我都需要一个有效的解决方案。

Answer 1

我让它在jsFiddle上工作。 Try this link

<div id="dialog">
    <h3>Here is the dialog content</h3>
    <p id="dialogContent"></p>
</div>
<button onclick="$('#dialog').dialog('open');">open</button>

<script>
    $(document).ready(function(){
        $('#dialog').dialog({
            title: 'My dialog',
            dialogClass: "noOverlayDialog",
            autoOpen:false,
            modal: true,
            open: function(event,ui){
                $('.noOverlayDialog').next('div').css( {'opacity':0.0} );
            }
        });
    });
</script>

Answer 2

jQuery使用的叠加层具有类ui-widget-overlay。所以在你的css中加入以下css规则，

.ui-widget-overlay {
    opacity: 0;
    filter: alpha(opacity=0);  /* IE8 and lower */
}

DEMO： http://jsfiddle.net/Lhwsq/

注意：

确保在jQuery css或任何其他插件css之后包含此规则。
此样式将应用于同一页面中的任何对话框。

要使其适用于任何特定对话框，请参阅https://stackoverflow.com/a/14586175/297641

Answer 3

一个选项是创建一个额外的课程overlay-hidden，并在对话框为opened时将其添加到叠加层，并在closed时将其删除。这将确保页面中的其他对话框（可能需要可见的叠加层）继续正常工作：

open: function(event,ui){
    $('.ui-widget-overlay').addClass('overlay-hidden');
},
beforeClose: function(event,ui){
    $('.ui-widget-overlay').removeClass('overlay-hidden');
}

overlay-hidden课程将覆盖opacity至0，由@Vega覆盖suggested：

.overlay-hidden {
    opacity: 0.0;
    filter: alpha(opacity=0);  /* IE8 and lower */
}

jsFiddle的

Working example（改编自@ ShadeTreeDeveloper的answer）。

Answer 4

我有一种感觉，你所看到的是在透明效果（顺便说一下，并非所有浏览器都支持）之前短暂渲染的叠加背景图像能够启动。

.ui-widget-overlay { background: none !important; }

以上应该有效。正如上面的评论已经说明的那样，在您的服务器或JSFiddle上发布一个示例将允许更具体的诊断。

Answer 5

以下答案都不适合我，但我最终找到了解决方案。

事实证明，对话框最初是在一个名为.ui-effects-wrapper的容器内呈现的，其中叠加层位于容器之后，而不是对话框：

<div class="ui-effects-wrapper" ... >
     <div class="ui-dialog" .... >
     </div>
</div>
<div class="ui-widget-overlay" ...> </div>

因此，我的选择器.ui-dialog.noOverlayDialog + .ui-widget-overlay只有在效果容器被移除后才会生效。要解决这个问题，我需要针对两个选择器：

.ui-dialog.noOverlayDialog + .ui-widget-overlay, 
.ui-effects-wrapper + .ui-widget-overlay {
      background: none !important;
      opacity: 0 !important;
}

注意，第二个选择器是全局的。

没有叠加的JQuery模态对话框

5 个答案: