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] 把焦点保持在模态窗口（modal dialog）上
opacity [Number:50] 设置overlay div的不透明度，1-100
overlayId [String:'simplemodal-overlay'] overlay div的DOM元素的ID
overlayCss [Object:{}] overlay div的CSS样式
containerId [String:'simplemodal-container'] container div的DOM元素的ID
containerCss [Object:{}] container div的CSS样式
dataId [String:''] data div的DOM元素的ID
dataCss [Object:{}] data div的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 ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
});
复制代码
就两行代码，是不是很简单。
三：simplemodal实现弹出一个是/否的确认对话框(类似于QQ邮箱删除提示)
不多说，直接显示效果
是不是很炫。直接贴出关键代码：
复制代码
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
复制代码
四：simplemodal实现弹出一个ASPX页面(官网上是弹出一个php页面)
这个很实用，主要是考虑用户体验。官网用的是php页面，我用aspx页面来实现。直接贴关键代码。
要弹出页面的contact.aspx
复制代码
<body>
<div style='display: none'>
<div class='contact-top'>
</div>
<div class='contact-content'>
<h1 class='contact-title'>
Send us a message:</h1>
<div class='contact-loading' style='display: none'>
</div>
<div class='contact-message' style='display: none'>
</div>
<form action='#' style='display: none'>
<label for='contact-name'>
*Name:</label>
<input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
<label for='contact-email'>
*Email:</label>
<input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />
<label for='contact-subject'>
Subject:</label>
<input type='text' id='contact-subject' class='contact-input' name='subject' value=''
tabindex='1003' />
<label for='contact-message'>
*Message:</label>
<textarea id='contact-message' class='contact-input' name='message' cols='40' rows='4'
tabindex='1004'></textarea>
<br />
<label>
</label>
<input type='checkbox' id='contact-cc' name='cc' value='1' tabindex='1005' />
<span class='contact-cc'>Send me a copy</span>
<br />
<label>
</label>
<button type='submit' class='contact-send contact-button' tabindex='1006'>
Send</button>
<button type='submit' class='contact-cancel contact-button simplemodal-close' tabindex='1007'>
Cancel</button>
<br />
<input type='hidden' name='token' value='32928a0b3581a8afd529a835c4648bf6' />
</form>
</div>
<div class='contact-bottom'>
<a href='http://www.ericmmartin.com/projects/simplemodal/'>Powered by SimpleModal</a></div>
</div>
</body>
复制代码
对于contact.js来说 ，直接修改data/contact.php为自己写的aspx页面名称即可。本例是contact.aspx
五：simplemodal的其它使用
官网还有其它的效果，可以去官网下载相应代码。我把官网的全部代码给大家贴出来。
原文地址：http://www.cnblogs.com/yxhblog/archive/2012/07/11/2586712.html
(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] 把焦点保持在模态窗口（modal dialog）上
opacity [Number:50] 设置overlay div的不透明度，1-100
overlayId [String:'simplemodal-overlay'] overlay div的DOM元素的ID
overlayCss [Object:{}] overlay div的CSS样式
containerId [String:'simplemodal-container'] container div的DOM元素的ID
containerCss [Object:{}] container div的CSS样式
dataId [String:''] data div的DOM元素的ID
dataCss [Object:{}] data div的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 ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
});
复制代码
就两行代码，是不是很简单。
三：simplemodal实现弹出一个是/否的确认对话框(类似于QQ邮箱删除提示)
不多说，直接显示效果
是不是很炫。直接贴出关键代码：
复制代码
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
复制代码
四：simplemodal实现弹出一个ASPX页面(官网上是弹出一个php页面)
这个很实用，主要是考虑用户体验。官网用的是php页面，我用aspx页面来实现。直接贴关键代码。
要弹出页面的contact.aspx
复制代码
<body>
<div style='display: none'>
<div class='contact-top'>
</div>
<div class='contact-content'>
<h1 class='contact-title'>
Send us a message:</h1>
<div class='contact-loading' style='display: none'>
</div>
<div class='contact-message' style='display: none'>
</div>
<form action='#' style='display: none'>
<label for='contact-name'>
*Name:</label>
<input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
<label for='contact-email'>
*Email:</label>
<input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />
<label for='contact-subject'>
Subject:</label>
<input type='text' id='contact-subject' class='contact-input' name='subject' value=''
tabindex='1003' />
<label for='contact-message'>
*Message:</label>
<textarea id='contact-message' class='contact-input' name='message' cols='40' rows='4'
tabindex='1004'></textarea>
<br />
<label>
</label>
<input type='checkbox' id='contact-cc' name='cc' value='1' tabindex='1005' />
<span class='contact-cc'>Send me a copy</span>
<br />
<label>
</label>
<button type='submit' class='contact-send contact-button' tabindex='1006'>
Send</button>
<button type='submit' class='contact-cancel contact-button simplemodal-close' tabindex='1007'>
Cancel</button>
<br />
<input type='hidden' name='token' value='32928a0b3581a8afd529a835c4648bf6' />
</form>
</div>
<div class='contact-bottom'>
<a href='http://www.ericmmartin.com/projects/simplemodal/'>Powered by SimpleModal</a></div>
</div>
</body>
复制代码
对于contact.js来说 ，直接修改data/contact.php为自己写的aspx页面名称即可。本例是contact.aspx
五：simplemodal的其它使用
官网还有其它的效果，可以去官网下载相应代码。我把官网的全部代码给大家贴出来。
原文地址：http://www.cnblogs.com/yxhblog/archive/2012/07/11/2586712.html