Modal dialog in web application

[sthrudel]

Hi!

I'm working on a web application in Asp.net and what I would like to
have is a cross borwser modal dialog which accepts user's input.

I would like to catch what the user clicked on the dialog. To be more
specific I want to have a confirmation dialog that is shown when a user
clicks on a Delete button (which deletes some values from database). If
Yes is pressed the delete action is processed otherwise modal dialog is
closed.

Modal dialog has to work with IE and Firefox so showModalDialog doesn't
count. Confirm (javascript) also doesn't count because the text on the
buttons must be set programmatically (localization).

I have found some pages (line this one:
http://javascript.about.com/library/blmodald1.htm) describing how to
work with modal dialogs, but I have trouble manipulating user's input.

Are there any solutions?

Thanks!

 

[Rob MacFadyen]

Hi,

In a cross browser environment you can't do a modal dialog. The example from
the link is essentially clever tricks with divs (note that in the example
even when the "modal dialog" is shown the keyboard commands are still
working... eg. pressing tab will shift focus through the links on the page,
pressing Enter will activate the link).

So... you're either stuck with modal for IE only, non-model for non-IE. Or
change the interaction design (clicking delete goes to a confirmation page,
clicking confirm on that page does the actual deletion).

For modal IE dialogs if you are doing "things" by postback (forms
submissions) you might run into problems. IE modal dialogs don't like
postbacks... you have to wrap do everything in an iframe and do the post
backs there. A bit messy feeling... but not so bad once you've got it
working.

With non-IE part of the "trick" is having the parent window react once the
user has finished doing something. The "window.parent" and
"window.parent.opener" is your friend here.

Here's a sample script that will call "DoMyThing" in the parent/opener. This
assumes the use of the outer/inner document via an IFRAME, and it is careful
to be cross browser (if dialogArguments exists it uses that... which is IE
specific). It is also careful to handle wierd situations (the original
window has been closed or the user has navigated away from the original
page):

<SCRIPT TYPE="text/javascript">
if (!window.parent)
window.close();
else
{
var opener;
if (window.parent.dialogArguments)
opener = window.parent.dialogArguments;
else
opener = window.parent.opener;
if (opener && !opener.isClosed)
{
if (opener.AddNewUser)
{
try {
opener.DoMyThing();
} catch (ex) { }
}
}
window.parent.close();
}
</script>



Hope that all makes sense

Rob MacFadyen

ps. One last note... when opening windows and hiding tool bars and such...
don't bother trying to hide the status bar. More and more this is being
disallowed for security reasons... so you're better off always showing it
and adjust the visual design to accomedate it.

 

[Teemu Keiski]

You can also create modal dialog with window.open (which works with
Firefox), I've used that techniwue in my blog post

ASP.NET: causing a postback after modal dialog is closed
http://aspadvice.com/blogs/joteke/archive/2006/08/05/20331.aspx

Essentially the relevamnt snippet there is:

if(window.showModalDialog)
{
var args=new Object();
args.window = window;
args.doPostBack = doPostBack;

window.showModalDialog('Dialog.aspx', args);
}
else
{
window.open('Dialog.aspx','','modal=yes');
}

Of course with arguments to window.open and showModalDialog, you have more
control over the size etc of the dialog window.