Back to Article

Modal Box Example:

Click Here for a modal box

HTML:

<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>

Javascript:

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();
    });
});