Menu
I can't get a jQuery UI modal dialog it to work as in the demo! Consider this recipe:
<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>
While the dialog is active, the second link is correctly disabled but the third link (onclick) still works! Also, the little browser hand appears when hovering both links. This is not like the demo... what am I doing wrong?
598
As Pointy points out, this is normally controlled by the jQueryUI CSS. But one can get around it by adding slightly hackish snippet to one's CSS file.
.ui-widget-overlay {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
That way the "shroud" div covers up all buttons and there's no need to use the jQueryUI CSS.
102
The problem is that you're not including the jQuery UI CSS file(s). You get the CSS file from the download package you prepare at the jQuery UI site, or I think you can get the standard "lightness" one from Google. Without the CSS file, the mechanism can't make the "shroud" layer work. Also you may have noticed that the dialog doesn't look like anything; that'll get better too when you add the CSS files.
http://jsfiddle.net/wxyBG/1/
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
