上一遍講了使用showModalDialog來實現模態窗口，今天我就說一下jquery是如何實現這樣的功能的。QQ郵箱里面的郵件刪除，彈出確認對話框是不是很好看，是的，它看起來實現很復雜，其實不然，現在Jquery插件已經很方便的讓你來實現這些功能，那就是我們的simplemodal插件。網上可以下載相應的插件，也可以直接上官網去下載相應插件與實例，我今天的內容也全部來自於官網，在本節的最后會有全部的Demo下載。
本節內容：
(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，謝謝。