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 回答