jquery实现模态窗口
本节内容：
(1)simplemodal的定义及说明
(2)simplemodal的基本使用
(3)simplemodal实现弹出一个是/否的确认对话框(类似于QQ邮箱删除提示)
(4)simplemodal实现弹出一个ASPX页面(官网上是弹出一个php页面)
(5)simplemodal的其它使用
一：simplemodal的定义及说明
定义：
SimpleModal是一个轻量级的jQuery插件，它提供了一个强大的界面模态对话框发展。认为它作为一个模式对话框框架。SimpleModal给你建立任何你可以想象的，同时屏蔽从相关的跨浏览器的UI开发所固有的问题，提高你开发的灵活性。
使用：
SimpleModal提供2个简单的方法来调用一个模式对话框。
（1）作为一个串连的jQuery函数，你可以调用一个jQuery元素modal()函数使用该元素的内容将显示一个模式对话框。
$("#element-id").modal();
(2)作为一个独立的功能，可以通过一个jQuery对象，一个DOM元素，或者一个普通的字符串（可以包含HTML）创建一个模态对话框。
$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>",{options});
其它说明
（1）在上面(2)中的options说的是一些选项和回调，它的参数如下：
选项和回调
选项
以下是当前选项的一个列表，默认值在[Type:Value]中说明
appendTo[String:'body']
focus[Boolean:true]把焦点保持在模态窗口（modaldialog）上
opacity[Number:50]设置overlaydiv的不透明度，1-100
overlayId[String:'simplemodal-overlay']overlaydiv的DOM元素的ID
overlayCss[Object:{}]overlaydiv的CSS样式
containerId[String:'simplemodal-container']containerdiv的DOM元素的ID
containerCss[Object:{}]containerdiv的CSS样式
dataId[String:'']datadiv的DOM元素的ID
dataCss[Object:{}]datadiv的CSS样式
minHeight[Number:200]container的最小高度
minWidth[Number:200]container的最小宽度
maxHeight[Number:null]container的最大高度，如果没有说明则使用window的高度
maxWidth[Number:null]container的最大宽度，如果没有说明则使用window的宽度
autoResize[Boolean:false]当window调整大小时调整container的大小，使用时需小心，因为它可能会发生不可预知的效果。
zIndex[Number:1000]z-Index的起始值
close[Boolean:true]如果为true，那么closeHTML,escClose,overClose将被使用，反之则不使用。
closeHTML[String:'']
closeClass[String:'simplemodal-close']
escClose[Boolean:true]
overlayClose[Boolean:false]
position[Array:null]
persist[Boolean:false]
onOpen[Function:null]
onShow[Function:null]
onClose[Function:null]
回调
回调函数使用JavaScript的apply函数来调用二：simplemodal的基本使用
先看下效果：
直接弹出一个层，层可以有按扭进行关闭，背景不能进行操作。多的不说，我直接写关键代码，在本文的最后会有源码下载
复制代码
jQuery(function($){
//Loaddialogonpageload
//$('#basic-modal-content').modal();
//Loaddialogonclick
$('#basic-modal.basic').click(function(e){
$('#basic-modal-content').modal();
returnfalse;
});
});
复制代码
就两行代码，是不是很简单。
三：simplemodal实现弹出一个是/否的确认对话框(类似于QQ邮箱删除提示)
不多说，直接显示效果
是不是很炫。直接贴出关键代码：
复制代码
jQuery(function($){
$('#confirm-dialoginput.confirm,#confirm-dialoga.confirm').click(function(e){
e.preventDefault();
//exampleofcallingtheconfirmfunction
//youmustuseacallbackfunctiontoperformthe"yes"action
confirm("ContinuetotheSimpleModalProjectpage?",function(){
window.location.href='http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
functionconfirm(message,callback){
$('#confirm').modal({
closeHTML:"<ahref='#'title='Close'class='modal-close'>x</a>",
position:["20%",],
overlayId:'confirm-overlay',
containerId:'confirm-container',
onShow:function(dialog){
varmodal=this;
$('.message',dialog.data[0]).append(message);
//iftheuserclicks"yes"
$('.yes',dialog.data[0]).click(function(){
//callthecallback
if($.isFunction(callback)){
callback.apply();
}
//closethedialog
modal.close();//or$.modal.close();
});
}
});
}
复制代码
四：simplemodal实现弹出一个ASPX页面(官网上是弹出一个php页面)
这个很实用，主要是考虑用户体验。官网用的是php页面，我用aspx页面来实现。直接贴关键代码。
要弹出页面的contact.aspx
复制代码
<body>
<divstyle='display:none'>
<divclass='contact-top'>
</div>
<divclass='contact-content'>
<h1class='contact-title'>
Sendusamessage:</h1>
<divclass='contact-loading'style='display:none'>
</div>
<divclass='contact-message'style='display:none'>
</div>
<formaction='#'style='display:none'>
<labelfor='contact-name'>
*Name:</label>
<inputtype='text'id='contact-name'class='contact-input'name='name'tabindex='1001'/>
<labelfor='contact-email'>
*Email:</label>
<inputtype='text'id='contact-email'class='contact-input'name='email'tabindex='1002'/>
<labelfor='contact-subject'>
Subject:</label>
<inputtype='text'id='contact-subject'class='contact-input'name='subject'value=''
tabindex='1003'/>
<labelfor='contact-message'>
*Message:</label>
<textareaid='contact-message'class='contact-input'name='message'cols='40'rows='4'
tabindex='1004'></textarea>
<br/>
<label>
</label>
<inputtype='checkbox'id='contact-cc'name='cc'value='1'tabindex='1005'/>
<spanclass='contact-cc'>Sendmeacopy</span>
<br/>
<label>
</label>
<buttontype='submit'class='contact-sendcontact-button'tabindex='1006'>
Send</button>
<buttontype='submit'class='contact-cancelcontact-buttonsimplemodal-close'tabindex='1007'>
Cancel</button>
<br/>
<inputtype='hidden'name='token'value='32928a0b3581a8afd529a835c4648bf6'/>
</form>
</div>
<divclass='contact-bottom'>
<ahref='http://www.ericmmartin.com/projects/simplemodal/'>PoweredbySimpleModal</a></div>
</div>
</body>
复制代码
对于contact.js来说，直接修改data/contact.php为自己写的aspx页面名称即可。本例是contact.aspx
五：simplemodal的其它使用
官网还有其它的效果，可以去官网下载相应代码。我把官网的全部代码给大家贴出来。
原文地址：http://www.cnblogs.com/yxhblog/archive/2012/07/11/2586712.html