Creating Modal Dialog With Javascript

I got inspired to write this post after reading Tyler Hall's post on modal dialog over at sitening

Nowadays when a web application does not necessary have to be a case of stuffing data through the browser and shipped to the server for processing, where the clients itself becomes a more active participant in the over all application, designing the web UI sometimes calls for methodologies that erstwhile wasn’t heard of in the browser’s domain.

One of such UI design methods is the modal dialog.

Modal dialog are not new. They have been around in the UI design of desktop application for donkey years.

You most likely interacts regularly with modal dialog in your everyday use of your computer.

A modal dialog, in a desktop application is a box or message that forces you to dismiss it by interacting with its options before you can continue using any other part of the program.

Here is a screen shot of a modal dialog:


Modal dialog is one of such design elements that is finding its foray into web applications, and thanks to JavaScript, it is easily implemented in the browser.
It is also simple.

The principle behind it is this: have a DIV that initially won’t be visible; that will contain the options to be presented via the modal dialog. Then have a javascript written that will make it visible when it is required. Once it is visible, any content beneath it will be “unclickable” by the user.

The code that will implement this can be divided into three parts: The HTML, the CSS and the JAVASCRIPT

THE HTML

The button (or whatever you choose to attach the modal dialog activation unto) that will fire the javascript when clicked:

<input type='button' value='show modal dialog' onclick='overlay()' />

Then the overlay DIV which initially will be invisible:

<div id="overlay">

     <div>

           <p>You are at liberty on what to use the dialog for.</p>

          <form method=" " action=" ">

          <input type='file'/>

          <input type='submit'/>

          </form>

          Click here to [<a href='#' onclick='overlay()'>close</a>]

     </div>

</div>

THE CSS

#overlay {

     visibility: hidden;

     position: absolute;

     left: 0px;

     top: 0px;

     width:100%;

     height:100%;

     text-align:center;

     z-index: 1000;

     background-color:#eee;

     opacity: 0.8;

     filter:alpha(opacity=80);

    -moz-opacity: 0.8;

}



#overlay div {

     width:300px;

     margin: 100px auto;

     background-color: #fff;

     border:1px solid #000;

     padding:15px;

     text-align:center;

}

The first style takes care of the full screen overlay: notice the opacity styles while the second style is applied to the modal dialog.

The margin style:
margin:100px auto;
Ensures the dialog is 100px from the top and it is centralized.

THE JAVASCRIPT

function overlay()
{
xyz = document.getElementById("overlay");
xyz.style.visibility = (xyz.style.visibility == "visible") ? "hidden" : "visible";
}


Put everything together and you have your modal dialog. As you can see, the whole stuff is incredibly simple.

Here is a screen shot before the activation of the modal dialog:



And this, after the button was clicked: