jquery modal dialog overlay keeps getting darker on subsequent dialog.load

ericdalrymple
ericdalrymple used Ask the Experts™
on
I have a jquery modal dialog that I use to display the details from a list page when the user clicks on a row in the list. Everything works fine except for this. Each time the dialog is opened and closed, the background of the list page gets darker and darker... eventually black.

Am I not closing the dialog properly?
strTitle="Item Details";
$("#detailsModal").dialog({
    autoOpen:"true",
    overlay: {
        "background-color": "#000",
        "opacity": "0.50",
        "-moz-opacity": "0.50"
    },
    autoOpen:"true",
    title:"Item Details,
    resizable:"true",
    modal:"true",
    height:500,
    width:700});
    
    $("#detailsModal").load("http://myurl?itemId=105");
}
 
 
Here is how I close the dialog:
<input type=button value=CANCEL onclick="$('#detailsModal').empty().dialog('close');">

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
I'm sure there is a better way... but here is how I got around it...when I click the cancel button I added a remove() which gets rid of the dialog div
echo"<input type=button value=CANCEL onclick=\"$('#detailsModal').dialog('close').remove();createDiv('detailsModal');\">&nbsp;";

here is the function to create the new div....
    function createDiv(strDiv){
       var newdiv = document.createElement('div');
       newdiv.style.width = 935;
       newdiv.style.height = 570;
       newdiv.innerHTML ="&nbsp;";
       newdiv.style.className = "flora";
       newdiv.style.position = "absolute";
       document.body.appendChild(newdiv);
       newdiv.setAttribute('id',strDiv);
    }

Author

Commented:
nevermind... still have problems... will update this later
Commented:
I think you were probably on the right track by closing it before emptying it.  You can also try using the close event (http://www.jqueryui.com/demos/dialog/) to make sure that the div gets emptied when the dialog closes.



strTitle="Item Details";
$("#detailsModal").dialog({
    autoOpen:"true",
    overlay: {
        "background-color": "#000",
        "opacity": "0.50",
        "-moz-opacity": "0.50"
    },
    autoOpen:"true",
    title:"Item Details,
    resizable:"true",
    modal:"true",
    height:500,
    width:700,
    close: function() {$(this).empty();}
    });
    
    $("#detailsModal").load("http://myurl?itemId=105");
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial