Geek Answers Handbook

Unable to get jQuery UI modal dialog to be modal

I can not get the jQuery UI modal dialog to make it work like in 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! In addition, a small browser panel appears when you hover both links. This doesn't sound like a demo ... what am I doing wrong?

+5
source share
2 answers

As Pointy points out , this is usually controlled by jQueryUI CSS. But you can get around this by adding a bit of hacker snippet to a single CSS file.

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

, "" div , jQueryUI CSS.

+4

, () jQuery UI CSS. CSS , jQuery, , "" Google. CSS "" . , ; , CSS.

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

+3

More articles:


All Articles