无法获得jQuery UI的模式对话框是模式

我不能让一个jQuery UI 模态对话框它作为demo工作！考虑这个食谱：无法获得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）仍然有效！另外，当悬停两个链接时，小浏览器手会出现。这不像演示...我做错了什么？

来源

2010-11-07 Joao Tavora

作为Pointy指出，这通常是通过jQueryUI的CSS控制。但是可以通过在CSS文件中添加一些小问题来解决这个问题。

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

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

来源

2010-11-07 16:00:33

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

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

来源

2010-11-07 13:43:12 Pointy

我宁愿不包括jQueryUI CSS。你能帮我找到哪个CSS属性必须设置在哪个CSS类上，以便“遮蔽”层工作？另外，我注意到对话框看起来不像任何东西，在我真正的应用程序中，我有CSS来处理这个问题，这只是一个简单的配方。 – 2010-11-07 15:35:43

嗯，我在这里同情你，但jQuery UI部件**严重依赖于CSS。事实上，CSS的依赖程度如此之高，可能更容易找到不同的对话工具。或者，您可以获取他们的CSS，然后根据需要进行编辑。这有点乱，但他们确实使用了很好的类名，所以你可以弄清楚是什么。我在我自己的应用程序中完成了这个工作，因为我也不喜欢jQuery UI东西的“外观”。 – Pointy 2010-11-07 15:36:59

好吧，我确实找到了它，只需添加.ui-widget-overlay {height：100％;高度：100％; left：0; position：absolute; top：0; 宽度：100％; }这使得覆盖层覆盖了其他一切。感谢您的“jsfiddle”链接，它是这类实验的极好工具！所以总结一下：要么包括jQuery UI CSS，要么使用上面的黑客，如果你还将这个信息添加到你的答案中，我会接受它:-) – 2010-11-07 15:52:04

无法获得jQuery UI的模式对话框是模式

回答

相关问题