Advanced Modal DHTML Popup Add-on

This add-on (version 1.4, requires Pro version 2.44+) allows you to create a Modal DHTML Popup like the one on this page (further enhancements coming with free upgrade to those who purchase now):

  What is a Modal DHTML Popup (modal dialog) window?

A modal window or popup is a child window created within the parent window which requires the user to interact with it before they can return to the parent application. Modal windows are commonly used in applications to control user awareness and to display critical notices.

Modal windows or dialogs are often seen in windows applications, such as the standard JavaScript alert box. But these are separate entities from the parent application or Web page that spawned them. When using DHTML popup windows the situation is different since while they are child entities they are also a part of the page.

Click here to show the Modal DHTML Popup!

  How does a Modal DHTML Popup work?

Since all DHTML popups are embedded in the Web page they belong to, something else is needed to separate the popup from the page, and for this we use a partially transparent div to cover the whole page with.

This div prevents access to all links, select boxes, menu items etc until the DHTML popup is closed.

For the special case if Internet explorer, where select boxes always reside above all other page elements (having their own z-index rules), the script detects them and hides them until the popup is closed. On this page we show an example of this.

In addition, using the tab key is prevented while the popup is open so that the visitor cannot simply tab to a control or link in the page.

In the special case of the Opera browser, which does not support opacity yet, a transparent PNG image is substituted for the div, providing the same effect.

The div or the PNG image are configurable (in particular the color used) with a simple css file included in the add-on.

When the DHTML popup is closed the mask behind it and in front of the page is automatically removed, all select boxes (in IE) are shown again and the tab key functions are restored.

The mask will automatically scroll when the browser window is scrolled and resize itself with the browser.

  Why would you want to use a Modal DHTML Popup?

For all the same reasons and more that a normal Modal dialog or popup window is used, for example:

• To ensure visibility of a particular notice and command attention to it
• To block application flow until required information is entered
• To collect application configuration options in a dialog
• To warn that the effects of an action are not reversible
• To force the user to respond to a question before continuing
• To display a message, prompt for input
• Loading new documents into the window
• In circumstances where useful work requires a decision to be made and a dialog is opened
• File selection by a modal dialog

  DHTML Popup Methods of removing the mask

By default the close button on the modal popup is clicked to remove both the mask and the popup, but this can be extended to any link or button in the popup - ask us for help if needed here, but its very easy.

What the add-on consists of:

• A script in a separate file to create the mask, with accompanying CSS style sheet and images.
• Clear instructions (viewable in the browser) for implementation, with example code shown and exactly what to change.
• A demo using the same files provided so that the instructions can be see in action.