无法使jQuery UI模态对话框成为模态

Question

无法使jQuery UI模态对话框成为模态

5

我无法像演示中那样使用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>

当对话框处于激活状态时，第二个链接会正确地被禁用，但第三个链接（onclick）仍然有效！此外，当鼠标悬停在两个链接上时，都会出现小型浏览器手形图标。这与演示不同...我做错了什么吗？

- joao

2个回答

3

问题在于您没有包含jQuery UI CSS文件。您可以从jQuery UI网站下载准备的下载包中获取CSS文件，或者我认为您可以从Google获取标准的“lightness”文件。没有CSS文件，机制就无法使“遮罩”层起作用。此外，您可能已经注意到对话框看起来什么都没有；当您添加CSS文件时，这也会变得更好。 http://jsfiddle.net/wxyBG/1/

- Pointy

我宁愿不包含jQueryUI CSS。你能帮我找到哪个CSS属性必须设置在哪个CSS类上，以便“遮罩”层起作用吗？此外，我注意到对话框看起来什么都没有，在我的真实应用程序中，我已经放置了CSS来处理这个问题，这只是一个简单的示例。 - joao

我在这里理解你的感受，但是 jQuery UI 小部件严重依赖于那个 CSS。实际上，有很多 CSS 依赖关系，因此可能更容易找到不同的对话框工具。或者，您可以获取他们的 CSS，然后按照自己的想法进行编辑。这有点混乱，但他们使用了良好的类名，因此您可以弄清楚每个元素的作用。我在自己的应用程序中也这样做了，因为我也不喜欢 jQuery UI 的外观。 - Pointy

好的，我找到了，只需添加.ui-widget-overlay { height:100%; left:0; position:absolute; top:0; width:100%; } 这将使遮罩层覆盖其他所有内容。感谢您提供的“jsfiddle”链接，这是进行此类实验的绝佳工具！因此，总结一下：要么包含jQuery UI CSS，要么使用上述hack，如果您还将此信息添加到您的答案中，我会接受它 :-) - joao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- joao · Accepted Answer

如Pointy所指出的那样，这通常由jQueryUI CSS控制。但是可以通过在CSS文件中添加略微有些hackish的片段来绕过它。

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

那么“遮盖”div将覆盖所有按钮，就不需要使用jQueryUI CSS。