Personally, I don’t like using Modal Dialogs because they are IE only – BUT some times thats what the client wants, so thats what they get. One of the biggest annoyances when using Modal Dialogs is the little quirk of opening a new window when trying to submit a form located within the dialog. The solution is easy enough, it just took a while for me to find so I thought I would post it here:
Code:
<head>
<base target="_self" />
</head>
Thats it. I don’t recall where I found this exactly, but it was on some message board after scouring Google search results for quite some time.
So, how do you tell whether to use modals or pops? Thats a pretty easy one too, but its a pain because of all the extra coding required:
Code:
var oInput = new Object();
var oReturn = new Object();
if(!window.showModalDialog)
{
//code for browsers not supporting modal dialogs goes here
//
window.open("testpop.htm","testpop","height:570px;width:700px;help:no;scroll:yes;"")
}
else
{
//code for browsers supporting modals goes here
oReturn = showModalDialog("testpop.htm", oInput, "dialogHeight:570px;dialogWidth:700px;center:yes;help:no;scroll:yes;");
tstFormElement.value = oReturn.value;
}
This is more robust than checking whether the incoming browser is IE or not, because who knows when or if the other browsers will integrate modal dialogs? Of course, this just handles opening the window. If you want to manipulate any data on the page opening the dialog/pop, you have to place a similar block in the opened page because the opener is referenced differently. Wait…what?
Code:
if(!window.showModalDialog)
{
//code for browsers not supporting modal dialogs goes here
opener.document.getElementById('elementID').value = "test value";
}
else
{
//code for browsers supporting modals goes here
var oReturn = new Object();
oReturn.value = "test value"
//place code to change values when this object is returned
}
So the last (?) hurdle here, is making your faux modal window act like a modal dialog, which is to say, it retains focus and does not allow the user to return to the calling window. I wrote a basic script – placed in the opening window – checking whether the opened window was still open or not. If it was still open, the opener returned focus to the dialog. This worked nicely at first, but when I started hammering away at it I could get it to fail. If anyone has a better suggestion, please let me know – just don’t bring up Mozilla’s modal=true bs, because its crap and it doesn’t work – at least not for me. And even if it does, its only for Mozilla.
There are probably other techniques for this, but these work adequately for me when I am forced to take this route.
Modal Dialogs are bad. If you feel you have no other choice, take a step back and find another way. It will save you blood, sweat, and tears.
