JQuery dialog is popular plugin, but sometimes it doesn’t work as we want to. I had a situation where my modal window pop up always third time and I had no idea why… Event for my button was binded well and popUpWindow() function execute every time, but function had strange behaviour. The code looked like this:
function popUpWindow(id, title, containerId) { $('#' + id).dialog('destroy'); $('#' + id).dialog({ autoOpen: false, bgiframe: true, modal: true, title: title, open: function (event, ui) { $('#' + id).append("simple Div Tag"); $('#' + id).parent().appendTo($("form")); }, close: function (event, ui) { $('#' + id).parent().appendTo($('#' + containerId)); $("body").css("overflow", "auto"); } }); $('#' + id).dialog('open'); $('#' + id + " input:text:visible:first").focus(); }
Function worked fine everywere else except a one particular userControl – so fixing the bug was quite difficult. The solution was to hold the modal div in a variable, so new function takes the form:
function popUpWindow(id, title, containerId) { var divObj = $('#' + id); divObj.dialog('destroy'); divObj.dialog({ autoOpen: false, bgiframe: true, modal: true, title: title, open: function (event, ui) { divObj.append("simple Div Tag"); divObj.parent().appendTo($("form")); }, close: function (event, ui) { divObj.parent().appendTo($('#' + containerId)); $("body").css("overflow", "auto"); } }); divObj.dialog('open'); $('#' + id + " input:text:visible:first").focus(); }
Hopefully this helps someone saving some time.