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

Joa*_*ora 5 javascript jquery jquery-ui

我无法获得一个jQuery UI 模式对话框,它可以像在演示中一样工作!考虑这个食谱:

<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>
Run Code Online (Sandbox Code Playgroud)

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

Joa*_*ora 4

正如Pointy指出的,这通常由 jQueryUI CSS 控制。但是我们可以通过在 CSS 文件中添加一些稍微有点 hackish 的代码片段来解决这个问题。

.ui-widget-overlay { 
    height:100%; 
    left:0; 
    position:absolute; 
    top:0; 
    width:100%; 
 } 
Run Code Online (Sandbox Code Playgroud)

这样,“shroud”div 就会覆盖所有按钮,并且无需使用 jQueryUI CSS。