8

我试图显示一个阻止界面（模式）但没有覆盖的“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;or的效果相同visibility:hidden。

为了确保是 css 删除了覆盖而不是其他东西，我删除了 css 行，并且可以肯定覆盖现在总是可见的。

为什么会这样？我认为静态 CSS 不应该有这种行为，并且覆盖层应该立即隐藏而无需闪烁。

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

4

5 回答 5

6

我让它在 jsFiddle 上工作。 试试这个链接

<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>
于 2013-01-29T15:18:14.990 回答
4

jQuery 使用的覆盖具有 class ui-widget-overlay。所以在你的css中包含下面的css规则，

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

演示：http: //jsfiddle.net/Lhwsq/

笔记：

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

要使其在任何特定对话框上工作，请参阅https://stackoverflow.com/a/14586175/297641

于 2013-01-29T16:33:40.757 回答
3

一种选择是创建一个附加类，并在打开overlay-hidden对话框时将其添加到覆盖层中，在关闭时再次将其删除。这将确保页面中的其他对话框（可能需要可见的覆盖）继续正常工作：

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

正如@Vega所建议的那样，该类overlay-hidden将覆盖opacityto ：0

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

jsFiddle 的工作示例（改编自 @ShadeTreeDeveloper 的回答）。

于 2013-02-01T23:18:56.563 回答
1

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

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

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

于 2013-01-29T14:52:53.917 回答
1

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

事实证明，对话框最初是在一个容器内渲染的，该容器调用的是容器.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;
}

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

于 2013-02-12T01:48:54.220 回答