Jquery UI modal dialogs

I have a problem with Jquery UI modal dialogs. I have modal dialog (dialogA), which can create another modal dialog (dialogB). After the second creation and closure of the dialogB the overlay of dialogA disappear.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link type="text/css" rel="Stylesheet" href="ui-lightness/jquery-ui-1.8.custom.css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript">
        function createDialog(dialogId) {
   $('#' + dialogId).dialog({
    autoOpen: true,
    modal: true,
    buttons: {
     'close': function() {
      $(this).dialog('close');
     },
     'create': function() {
      var newDialogId = dialogId + '1';
      $('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
      createDialog(newDialogId);
     }
    },
    close: function() {
     $(this).dialog('destroy');
     $(this).remove();
    }
   });
  }

  $(document).ready(function() {
   $('#button1').click(function() {
    var dialogId = 'dialog';
    $('body').append('<div id="' + dialogId + '">' + dialogId + '</div>');
    createDialog(dialogId);
   });   
  });
    </script>
</head>
<body>
    <button id="button1">Create dialog</button> 
</body>
</html>

http://jsbin.com/otama

Steps to reproduce:
1. create a dialog (dialog) by clicking on the button
2. create another dialog (dialogA) by clicking on the "create" button inside first dialog
3. close dialogA
4. repeat steps 2-3
5. overlay of the first dialog has been disappeared

Thanks

This is what I came up with, since this is obviously a bug with the modal dialog, I can present you with a "hack" that will work, but I think that the reason it messes up is the fact that when you create a modal dialog it adds the

<div class="ui-widget-overlay"></div>

above the dialog div, and since you are appending all of the dialogs directly to the body, it gets confused which ones needs to close after awhile (this is only my assumption, which I really shouldn't be doing) :)

Workaround is to check on the number of dialogs and number of overlays every time CreateDIalog is called, and if they don't match, you manually insert a new overlay which will get rid of your problem. One thing with that is that, since this overlay was added manually, dialog doesn't know that it needs to hide it, so when you are back to only one dialog, and you close it, the overlay stays. That needs to be hidden manually as well.

I know this is not the best solution, but it's a workaround and it worked for me, so I hope you can use it until somebody comes up with a better solution.

here is the code:

function createDialog(dialogId) {
      $('#' + dialogId).dialog({
        autoOpen: true,
        modal: true,
        buttons: {
          'close': function() {
            $(this).dialog('close');
          },
          'create': function() {
            var newDialogId = dialogId + '1';
            $('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
            createDialog(newDialogId);
          }
        },
        close: function() {
          $(this).dialog('destroy');
          $(this).remove();
          resetOverlays();
        }
      });

      var dialogs = $("div.ui-dialog");
      var overlays = $("div.ui-widget-overlay");
      var overlayStyle = $(overlays[0]).attr("style");

      if(dialogs.length > overlays.length)
      {
        var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
        $("body").append(overlay);
      }
    }

    function resetOverlays()
    {
      var dialogs = $("div.ui-dialog");
      if(dialogs.length == 0)
      {
        $(".ui-widget-overlay").remove();
      }
    }

I added the check for dialogs and overlays:

      var dialogs = $("div.ui-dialog");
      var overlays = $("div.ui-widget-overlay");
      var overlayStyle = $(overlays[0]).attr("style");

      if(dialogs.length > overlays.length)
      {
        var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
        $("body").append(overlay);
      }

which takes care of adding an additional overlay when needed, and I added a function for reseting the overlay when you don't need it anymore

        function resetOverlays()
        {
          var dialogs = $("div.ui-dialog");
          if(dialogs.length == 0)
          {
            $(".ui-widget-overlay").remove();
          }
        }

which is called in the close section of the dialog script

           ,close: function() {
              $(this).dialog('destroy');
              $(this).remove();
              resetOverlays();
            }

I haven't had a chance to test it thoroughly, but it might be a start if nothing else..

good luck

This issue was raised as bug and closed. Latest jQuery UI release (1.8.10) would solve this problem. Please check this ticket for more details.

来源：https://stackoverflow.com/questions/2637327/jquery-ui-modal-dialogs

标签

javascript

jquery-ui

dialog

modal-dialog

overlay