没有叠加的JQuery模态对话框

我正在尝试显示一个“ajax loader对话框”,它阻止了界面(模态)但没有叠加.

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

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

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

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

但是,当我调用对话框(“打开”)时,覆盖闪烁然后消失,就像我使用Javascript隐藏它一样.使用display：none;效果相同;或可见性：隐藏.

为了确保它是删除叠加层的css而不是其他东西,我删除了css行,当然,叠加层现在总是可见的.

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

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

解决方法

我让它在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',autoOpen:false,modal: true,open: function(event,ui){
                $('.noOverlayDialog').next('div').css( {'opacity':0.0} );
            }
        });
    });
</script>