Random thoughts from an unusual company

Thing-a-Day 2: No more popup windows

Tim Davis  14 July 2009 08:00:00
This is Day 2 of my week of tips for web development in Domino. I hope some of you find them useful.

One thing you can't really avoid is the need for dialogs. The usual way to create a dialog in a browser is to use javascript and open a new window and turn off the menu bar, status bar, etc, so it looks vaguely like a dialog. Something like this:

var myDialog = window.open( myURL, "windowName", "status=no");

This is fairly clumsy, especially if you want to feed data back to your original page.

A nicer, more Web 2.0 dialog effect can be created by putting your dialog fields at the bottom of your form and wrapping them in a < div id="myDialog" > tag.

Start with this div being hidden ( e.g. by using a style of visibility:hidden) and then when you want to display your dialog, simply use javascript to make the div visible again, e.g.

var myDialog = document.getElementById( "myDialog" );
myDialog.visibility = "visible";

Since the dialog is only a < div >, you can use whatever sexy layout you like to make it look really good.

You would position it using styles like this:

top: 100px;
left: 200px;

(or you could use some javascript to find the size of the screen and position it centered.)

Inside the dialog, you have an OK button or hotspot which hides it again (myDialog.visibility="hidden") and does whatever you need to do. You could even have your button do an @command([filesave]) to submit the form and it will include all the dialog fields.

An advantage of this approach is that the data in your dialog is part of the form, and so is saved along with it when you save the document. No more fiddling with window.opener to get data back to your original window.

Tomorrow: How to do that cool faded-out background behind your dialog.

1Timothy Briley  14/07/2009 21:42:15  Thing-a-Day 2: No more popup windows

A sample page would be great.