jQuery对话框模态选项不起作用。

Question

这是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>

这是 JavaScript

$bb('#addTopicButton').live('click',function() {

     $bb( "#dialog" ).dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false }); 

       });

模态框为什么不能正常工作？当模态框打开时，我仍然可以点击页面上的其他链接并在后台执行操作。

非常感谢

更新： 看起来它确实可以工作。只有后台链接是活跃的并且可以使用。如何禁用所有内容，包括链接？

- Andrew

---

你是否将相关的CSS文件放置在正确的位置？据我回忆，模态框是通过在对话框后面放置一个遮罩层来防止用户点击其他内容的。这个遮罩层需要特定的CSS才能正常工作。 - Jamie Dixon

我没有CSS，应该在哪里/如何定义它？ - Andrew

Answer 1

你可能只需要将jQuery UI CSS包含到你的页面中。

Google 在它的 CDN 上提供了这个：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

对话框上的模式选项会在你的对话框下创建一个叠加层，但在其他内容上方。此叠加层需要使用 jQuery UI CSS 才能正常工作。

- Jamie Dixon

---

就是这样！非常感谢，太棒了，不知道我怎么会忘记它。 - Andrew

很容易，我常常这样做。前几天为了让jQuery在一个新页面上工作尝试了一个小时，但忘记了引入jQuery的文件。 - Brad

Answer 2

我刚遇到了同样的问题。我需要这个CSS，但我不想要全部。所以我只是将这部分代码复制粘贴到我的CSS文件中：

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #aaaaaa;
    opacity: 0.3;
}

- Paul van den Dool

---

感谢您指出.css文件中必要的部分 :) - Vinz

太棒了！！我感到有点傻，之前没有想到这个:P - ettdro

Answer 3

仅将.ui-widget-overlay添加到CSS中将使覆盖层出现在整个顶部，甚至对话框也无法使用。

因此，还应添加.ui-front类：

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-front {
    z-index: 100;
}

- Yash

---

在我的情况下，这比包含整个jQ-UI基本样式要好得多。非常感谢！ - Arvid

Answer 4

我曾经遇到过同样的问题，我用几乎相同的方法解决了它。我进入了 'jquery-ui.theme.css' 文件中搜索了 '.ui-widget-overlay'，并将其代码块改为：

.ui-widget-overlay {
    background: #A9BCD0;
    opacity: 1;
    filter: Alpha(Opacity=100); /* support: IE8 */
}

到

.ui-widget-overlay {
    background: #A9BCD0;
    opacity: .3;
    filter: Alpha(Opacity=30); /* support: IE8 */
}

- user2288580