"Close" link.

Could someone tell me how to incorporate a small text or image link to "close" the overlay and return to page? A link that would behave the same way as clicking on the half-transparent dark overlay -- but that would be located inside the overlaying window.

Posted May 3rd, 2007 at 7:46am by jyeager

There is a command to close all open modal windows.

Control.Modal.close();

You could create a hyperlinked close button:

or something similar.

Posted May 3rd, 2007 at 9:47am by httpdotcom

try something like this:

/*

Define function that dynamically creates tag and inserts it into container, where first argument is a link class name (to style it separately in CSS) and second one (optional) specifies which text to insert into that link i.e. "X" or "Close"

Posted May 3rd, 2007 at 12:04pm by kangax

Event.observe(window,'load',function(){
      new Control.Modal($('modal_link_four'),{
            iframe: true,
            width: 640,
            height: 480,
            afterOpen: addCloseLink
        });
        new Control.Modal($('span_example'),{
            contents: 'Control.Modal can attach to any HTML element if you specify a "contents" option.',
            afterOpen: addCloseLink
        });
    });
    function addCloseLink() { 
        new Insertion.Top('modal_container', "<p><a href='javascript:void(0)' id='model_link_close' onClick='test()'>close</p>");
    }
    function test(){
     var current_modal = Control.Modal.current;
     current_modal.close();
    }

Test Links

<a href="http://www.google.com" id="modal_link_four">iframe Modal</a> - Opens a modal window that contains an iframe.
<BR>
<span id="span_example">Modal Attached to a <span></span></b> - Opens a modal with "contents" manually specified when span is clicked.

Posted June 4th, 2007 at 3:28pm by venu_dvmr