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