ansaurus

Question

Answer 1

+2 A:

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

drusnov 2010-04-15 17:29:47

Thanks. It works fine.

Ivan Butsyrin 2010-04-16 05:39:16

Answer 2

A:

thanks a lot ;-)

That works fine!

Martin 2010-08-31 20:56:26

ansaurus

tags:

views:

answers:

Jquery UI modal dialogs

related questions