Basically, a modal box is a window that requires some type of input from the user before they can continue (for example, click here to create a modal box). This can be useful for displaying important information (for example, if a user remains inactive for too long, a warning box will appear on your page warning you that your session will end.), or for entering information (for example, when sending a user a message, a modal box will popup, allowing you to send a message without leaving the page).

In our last part (click here to view the article), we learned how to find an element in a document, and how to manipulate it. In our example, we changed the text to be something else. To create a modal box, you will have to specify the element what will become the modal box, and what element will trigger the modal box. in the last article, we specified that a link object will be the trigger, and a div object will hold the HTML for the box. In this example, our HTML would look like this:

<a href="#" id="example-modal-box-trigger">Click Here for a modal box</a>
<div id="example-modal-box-content" class="hide">
    Here is the content
</div>

This gives us the framework to create the modal box. Our "example-modal-box-trigger" will cause "example-modal-box-content" to display when it is clicked. We included these IDs so we can find them when we specify the modal box's properties. The style="display:none" will cause the element not to show up on the page (it is good practice to include this definition in the CSS file, but we will specify it in the element for this example).

Now that we have the HTML in place, we can create the javascript to create the modal box. we will be leveraging an IGLOO class: ModalBox, which creates the modal boxes for a number of system elements. To use this for our own box, we will add the following into our javascript file:

window.addEvent('domready', function(){
    //Get the trigger and content for the modal box
    var trigger = $('example-modal-box-trigger');
    var content = $('example-modal-box-content');

    //When the link object is clicked, create the box
    trigger.addEvent('click', function(e){
            //create the modal box
           var modal = new Modalbox({
               'ismodal':true,
                'width':200,
                'height':300,
                'title':'My Modal Box',
                'closetext':'Close',
                'position':{
                    'screen':['middle','center']
               },
               'adopt': $(content)
        });

       //stop the event from going to the link
        e.stop();
    });
});

This might seem a bit complicated at first, so let's break down the code to make sense of it.