SO #4567947

by andrewwhitaker

HTML

<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<div class='modal' id='the_alert'>
    <div id='modal_content' class='modal_content'>
        <h2>hi there</h2>
        this is the body
        <p>
            <button class='close'>OK</button>
        </p>
    </div>
    <div id='modal_background' class='modal_background'><img src='/images/overlay/f9f9f9-180.png' class='stretch' alt='' /></div>
</div>
<button id="show">Show</button>

CSS

.modal {
    display:none;
    z-index:10000;
    background-color:#C0C0C0;
    width:400px;    
    min-height:200px;
    border:1px solid #666;
}

JavaScript

$('#the_alert').overlay({
        mask: {
            color: '#cccccc',
            loadSpeed: 200,
            opacity: 0.9
        },
        closeOnClick: false,
        load: false
    });

$("#show").click(function() {
    $("#the_alert").data("overlay").load();
});