Home/ Questions/Q 6197851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T03:53:42+00:00

I’m building an application that makes extensive use of jQuery UI Dialogs. I ran

  • 0

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.

Basically, it goes like this:

  • User opens dialog A (top: 100px, height: 300px)
  • User opens dialog B (top: 100px, height: 300px)
  • User closes dialog A
  • All dialogs opened after dialog A shifts up. e.g.: dialog B top property substracts dialog A height (100px – 300px = -200px): dialogs vanish.

I’ve come to that conclusion by using Firebug Inspect and Web Developer.

If dialog B (opened after dialog A) 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.

Using position: fixed; ( as suggested by @TheVillageIdiot ) fixes it, but is still happens when the dialog is destroyed.

Here’s an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>

    <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">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

</head>
<body>

<div id="dialog-1">

</div>
<div id="dialog-2">

</div>

<script type="text/javascript">
$('#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',
});
</script>

</body>
</html>

Any suggestions are much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s probably because your dialogs aren’t in position: absolute, so the position (i.e. top:X) of dialog B is calculated relatively to the position (top:Y) of dialog A.

    So let’s say that absolute position of dialog B is top: 20px, and dialog A is top: 10px, the assigned CSS position of dialog B will be top: 10px because it’s relative to dialog A. So when dialog A is destroyed, the position of dialog B (top: 10px) becomes relative to the element that was before dialog A, most likely higher, hence going upwards in your window.

    The solution is quite simple: set your dialog CSS position attribute to absolute. jQuery UI should catch up and calculate the positions properly.

    P.S.: Just make sure you define your CSS absolute position after loading the jQuery UI CSS stylesheet, to make sure that yours override jQuery’s.

    • 0