Jquery-simplemodal

1.Basic Modal Dialog
js

$(document).ready(function () {
    $('#basicModal input.basic, #basicModal a.basic').click(function (e) {
        //preventDefault方法取消事件的默认动作
        e.preventDefault();
        $('#basicModalContent').modal();
    });
});
//$(document).ready(function(){
//    $("#basicModal").click(function(e){
//    e.preventDefault();
//    $("#basicModalContent").modal();
//    });
//});

css

/* Overlay */
#simplemodal-overlay 
{
    background-color:#000;
    cursor:wait;
}

/* Container */
#simplemodal-container 
{
    height:400px;
    width:600px;
    background-color:#fff;
    border:3px solid #ccc;
}
#simplemodal-container a.modalCloseImg 
{
    background:url(../img/basic/x.png) no-repeat;
    width:25px; height:29px;
    display:inline; 
    z-index:3200; 
    position:absolute; 
    top:-15px; 
    right:-18px;
    cursor:pointer;
}
#simplemodal-container #basicModalContent
{
  padding:8px;
}

html

<div id='basicModal'><h2>Basic Modal Dialog</h2>
<p>A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
</div>
<div id="basicModalContent" style='display:none'>
    <h1>Basic Modal Dialog</h1>
 
    <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
    <p>Examples:</p>
    <p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
    <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
    <p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>
 
    <p><a href='http://www.ericmmartin.com/projects/simplemodal'>More details</a></p>
</div>

更多请参考：http://www.ericmmartin.com/projects/simplemodal/