The power of “window.showModalDialog” (posted by Aaron)

  • Article

I must admit that up until about 18 months ago I rarely (if ever) used modal dialogs when building web pages. I’m not sure why – but somehow I never really considered them useful in the web environment. Well, I can now say that I really don’t know how I lived without them.

 

Benefits of using dialogs:

  • Simplicity – By using modal dialogs you can restrict the user to doing one thing at a time. I’m a HUGE fan of keeping things simple… and there’s really nothing simpler than a modal dialog. The user can’t change the URL. They can’t refresh the page. You can even prevent them from resizing the dialog. By limiting the things they can do, you make their experience simpler and more straightforward.
  • Awareness – Dialog boxes allow a user to retain awareness about where they’re at in a web app w/o losing context. Take any “Add” scenario as an example. Typically, you’ll provide some sort of “Add” functionality when presenting users with lists of information. It’s easy to add a link or button and take them to a form that allows them to add new items to the list. However, doing so can very often confuse and lose users (mind you, these are usually the novice users). By using a dialog the user can still see the list in the parent window and easily retain awareness about what they’re doing.
  • Cleanliness – I’ve seen many devs try to build what we in our group call “All in Wonder” pages to do everything and anything. In my experience, these types of pages are never the right approach. They’re difficult to maintain, they are overly complex, and they lead to mistakes. Using dialogs helps guide the development of a site into easier to swallow bits.

What you need to use them:

  • Write yourself a couple of easy to use JavaScript functions to take care of opening and closing them.

function closeDialog(returnValue)

{

      window.returnValue = returnValue;

      window.close();

}

function GetDialogFeatures(dialogWidth, dialogHeight, resizable)

{

return "dialogWidth: " + dialogWidth + "px;dialogHeight: " + dialogHeight + "px;status: no;unadorned: yes;scroll: no;help: no;" + (resizable ? "resizable: yes;" : "");

}

// Usage Example.

var retValue indow.showModalDialog("SomePage?id=" + id, "", GetDialogFeatures(500, 240, false));

if (retValue)

window.location.reload(true);

  • Include in the <head> section of your page the following tag:

<base target="_self"></base>

 

Beyond that there’s really nothing to it. If you’ve never tried them before… give them a shot. I’d be willing to bet that you’ll never go back.

 

Aaron