JQuery的对话框模式选项不工作

这是HTML代码：JQuery的对话框模式选项不工作

<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 }); 

     });

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

非常感谢

UPDATE： 这似乎是虽然工作。只有链接在后台运行并且正在运行。我如何禁用所有内容，包括链接？

来源

2011-09-07 Andrew

你有没有在正确的位置相关的CSS文件？我记得，modal通过在对话框后面放置一个叠加层来防止用户点击其他任何东西。这个覆盖需要某些CSS工作。 –

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

它自带jqueryui –

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

谷歌在这里有这个在其CDN：

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

对话框上的模式选项下你的对话，但在内容的其余部分产生的叠加。这个覆盖需要jQuery UI CSS才能正常运行。

来源

2011-09-07 17:18:52

就是这样！非常感谢，很棒，不知道我怎么会忘记它 – Andrew

它很容易，我一直这么做。花了一个小时，试图让jquery有一天在新的页面上工作，并忘记了包括jquery – Brad

刚刚有同样的问题。我需要CSS，但我不想要所有的。所以，我只是复制粘贴此部分在我自己的CSS代码：

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

来源

2013-07-08 12:53:06

简单和重点。谢谢。适用于我:) –

感谢您指出.css文件的必要部分:) – Vinzenz

令人惊叹！对于之前没有考虑过这个问题，我觉得很愚蠢：P – ettdro

只添加的.ui小部件叠加到你的CSS将覆盖出现在顶部完成，甚至对话框将不可用。

因此，的.ui-前级也应加入：

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

来源

2014-07-04 07:29:41 Yash

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

JQuery的对话框模式选项不工作

回答

相关问题