没有叠加的JQuery模态对话框

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上工作. 试试这个链接

<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

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

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

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