Question

我无法获得jQuery UI 模态对话框，就像demo一样！考虑一下这个食谱：

<html>
  <head>
    <script type="text/javascript" src="/javascripts/jquery.js"></script>
    <script type="text/javascript" src="/javascripts/jquery-ui.js"></script>
  </head>
  <body>
    <p>First open a modal <a href="" onclick="$('<div>something</div>').dialog({modal: true}); return false;"> dialog</a></p>
    <p>Then try to hover over <a href="broken"> me</a></p>
    <p>And <a onclick="alert('clicked!'); return false;" href="alsobroken"> click me!</a></p>
  </body>
</html>

当对话框处于活动状态时，第二个链接被正确禁用，但第三个链接（onclick）仍然有效！此外，当悬停两个链接时，会出现一个小浏览器手。这不像演示......我做错了什么？

Answer 1

正如Pointy所指出的，这通常由jQueryUI CSS控制。但是可以通过在一个人的CSS文件中添加一些hackish片段来解决这个问题。

.ui-widget-overlay { 
    height:100%; 
    left:0; 
    position:absolute; 
    top:0; 
    width:100%; 
 }

这样“shroud”div覆盖了所有按钮，不需要使用jQueryUI CSS。

Answer 2

问题是你没有包含jQuery UI CSS文件。您从jQuery UI站点准备的下载包中获取CSS文件，或者我认为您可以从Google获得标准的“轻量级”文件。没有CSS文件，该机制无法使“寿衣”层工作。你可能也注意到对话框看起来不像什么;当你添加CSS文件时，它会变得更好。

http://jsfiddle.net/wxyBG/1/

无法将jQuery UI模式对话框变为模态

2 个答案: