Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - Dialogs vanish when one is closed/destroyed
    primarykey
    data
    text
    <p>I'm building an application that makes extensive use of jQuery UI Dialogs. I ran into an issue that happens when opening multiple dialogs at once, and can't really figure out how to fix it, if possible at all.</p> <p>Basically, it goes like this:</p> <ul> <li>User opens dialog <code>A</code> (top: 100px, height: 300px)</li> <li>User opens dialog <code>B</code> (top: 100px, height: 300px)</li> <li>User closes dialog <code>A</code></li> <li>All dialogs opened after dialog <code>A</code> shifts up. e.g.: dialog <code>B</code> <code>top</code> property substracts dialog <code>A</code> <code>height</code> (100px - 300px = -200px): dialogs vanish.</li> </ul> <p>I've come to that conclusion by using Firebug Inspect and Web Developer.</p> <p>If dialog <code>B</code> (opened after dialog <code>A</code>) is closed first, the problem does not occur. I've tried with a vanilla UI as well (i.e.: no stylesheets other than jQuery's loaded), and it still happens. There seems to be an trigger when a dialog closes that I can't override.</p> <p><strong>Using</strong> <code>position: fixed;</code> <strong>( as suggested by</strong> @TheVillageIdiot <strong>) fixes it, but is still happens when the dialog is destroyed.</strong></p> <p>Here's an example:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link type="text/css" rel="stylesheet" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="dialog-1"&gt; &lt;/div&gt; &lt;div id="dialog-2"&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $('#dialog-1').dialog({ close: function() { $(this).dialog('destroy'); }, height: 300, position: [100, 100], show: 'scale', hide: 'drop', resizable: false, title: 'A', }); $('#dialog-2').dialog({ close: function() { $(this).dialog('destroy'); }, height: 300, position: [100, 100], show: 'scale', hide: 'drop', resizable: false, title: 'B', }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Any suggestions are much appreciated.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload