我正在尝试显示一个“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>
