All geek questions in one place

JQuery UI modal dialogs

I have a problem with JQuery UI modal dialogs. I have a modal dialog (dialogA) that can create another modal dialog (dialogB). After the second creation and closing of dialog B, the dialogA overlay disappears.

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

Playback steps:
1. create a dialogue (dialogue) by pressing the button
2. create another dialog (dialogA) by clicking the create button in the first dialog box
3. close the dialogue

4. repeat steps 2-3
5. The overlay of the first dialogue has disappeared.

thanks

+4
source share
2 answers

This is what I came up with, since this is obviously a modal dialog error, I can present you with a “hack” that will work, but I think the reason this mess is because you create modal dialogue by adding

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

above the dialog div, and since you add all the dialogs directly to the body, it gets confused which ones need to be closed after a while (this is just my guess, which I really shouldn't do) :)

The workaround is to check the number of dialogs and the number of overlays each time CreateDIalog is called, and if they do not match, you manually insert a new overlay that will get rid of your problem. The one thing is that since this overlay was added manually, the dialog does not know that it needs to hide it, so when you return to only one dialog box and close it, the overlay will remain. This must also be hidden manually.

I know this is not the best solution, but it is a workaround, and it worked for me, so I hope you can use it until someone finds 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 dialogue and overlay checking:

  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, of necessity, requires the addition of an additional overlay, and I added a function to resell the overlay when you no longer need it

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

which is called in a closed section of the script dialog

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

I did not have the opportunity to thoroughly test it, but it can start if nothing else.

luck

+2
source

This issue was raised as an error and closed. The latest version of jQuery UI (1.8.10) will solve this problem. See ticket for more details.

+3
source

Source: https://habr.com/ru/post/1306913/

More articles:


All Articles