Javascript JQuery Dialog 模式选项不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7337812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Dialog modal option not working
提问by Andrew
This is the HTML code:
这是 HTML 代码：
<div id="dialog" title="lala" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
This is the JavaScript
这是 JavaScript
$bb('#addTopicButton').live('click',function() {
$bb( "#dialog" ).dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false });
});
Why modal is not working? When it is opened I still can click other links on the page and do things in the background.
为什么模态不起作用？当它打开时，我仍然可以单击页面上的其他链接并在后台执行操作。
Thanks a lot
非常感谢
UPDATE:It seems to be working though. Only the links are active in the background and working. How can I disable everything, including links?
更新：虽然它似乎工作。只有链接在后台处于活动状态并正常工作。如何禁用所有内容，包括链接？
回答by Jamie Dixon
You probably just need to include the jQuery UI CSS to your page.
您可能只需要将 jQuery UI CSS 包含到您的页面中。
Google has this on its CDN here:
谷歌在它的 CDN 上有这个：
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
The modal option on the dialog creates an overlay under your dialog but over the rest of the content. This overlay needs the jQuery UI CSS to function correctly.
对话框上的模态选项会在您的对话框下但在其余内容上创建一个叠加层。此叠加层需要 jQuery UI CSS 才能正常运行。
回答by Paul van den Dool
Just had the same issue. I needed the CSS, but I didn't want all of it. So I just copy pasted this part in my own CSS code:
刚刚有同样的问题。我需要 CSS，但我并不想要全部。所以我只是将这部分复制粘贴到我自己的 CSS 代码中：
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #aaaaaa;
opacity: 0.3;
}
回答by Yash
Adding only .ui-widget-overlay to your css will make the overlay appear on the complete top, and even the dialog will be unusable.
只将 .ui-widget-overlay 添加到您的 css 会使覆盖出现在完整的顶部，甚至对话框将无法使用。
Therefore, the .ui-front class too should be added:
因此，也应该添加 .ui-front 类：
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-front {
z-index: 100;
}
回答by user2288580
I had the same problem I solved it in nearly the same way I went into the 'jquery-ui.theme.css' file searched for '.ui-widget-overlay' and changed the block from:
我遇到了同样的问题，我以几乎相同的方式解决它，我进入“jquery-ui.theme.css”文件搜索“.ui-widget-overlay”并将块从：
.ui-widget-overlay {
background: #A9BCD0;
opacity: 1;
filter: Alpha(Opacity=100); /* support: IE8 */
}
to
到
.ui-widget-overlay {
background: #A9BCD0;
opacity: .3;
filter: Alpha(Opacity=30); /* support: IE8 */
}
