本文實例講述了jquery彈出框插件jquery.ui.dialog用法。分享給大家供大家參考，具體如下：
1. jquery.ui.dialog
官方地址 http://jqueryui.net/dialog/
jquery.ui.dialog是一個非常靈活的模式框,它的官方地址為: http://docs.jquery.com/UI/Dialog
2. 文件引用
要使用jquery.ui.dialog,需要引用兩個文件，1個是js，另外1個是css
在contentpage中添加：
<script type="text/javascript" src="/Content/ui.js"></script>
在masterpage中添加：
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
3. 使用方法
jquery.ui.dialog相比thinkbox要有優勢，thinkbox是在$.ready中指定的，導致不能靈活的擴展彈出層的彈出時機，針對一個邏輯判斷，一種情況下彈出，另外一種不彈出,thinkbox就缺乏應變能力，而jquery.ui.dialog()采用 $('..').dialog(..);的方式使得彈出更加靈活
1)彈出簡單的對話框
$("#dialog").dialog();2）彈出模式對話框
$("#dialog").dialog({ modal: true });3）彈出模式對話框，并有遮罩效果
4）帶確定與取消按鈕
$("#dialog").dialog("close");<!DOCTYPE html><html><head> <link href="/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#dialog").dialog(); }); </script></head><body style="font-size:62.5%;"><div id="dialog" title="Dialog Title">I'm in a dialog</div></body></html><!DOCTYPE html><html><head> <link href="/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#dialog").dialog(); }); </script></head><body style="font-size:62.5%;"><div id="dialog" title="Dialog Title">I'm in a dialog</div></body></html>jQuery boxy
使用該jQuery插件
要想使用該jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合適的選擇器表達式替換這里的"selector"，例如："a[rel=boxy],form.with-confirmation"。這會給匹配的元素附加一些行為，如下：
① 一個href屬性中如果錨點包含#，則此錨點相對應的ID的DOM元素的內容就會被添加到boxy對話框中。
② 如果href錨點內容為其他一些東西，則會試圖使用Ajax載入其對應的內容。理想情況下，我們有相同的起源檢查和委托對框架的跨域請求。這將會在下面展示。
③ 表單上會顯示一個提交模式的確認消息。
使用方法
使用下載包中的三個文件！
<script type ="text/javascript " src ="../js/jquery.boxy.js "> </script>
<link rel ="stylesheet " href ="../css/boxy.css " type ="text/css " />
基本的插件用法：
<script type="text/javascript">$(function(){ $(".boxy").boxy(); });</script>請注意，boxy對話框自動計算出您的內容區域內本身的大小和位置，沒有必要明確規定了包裝集的尺寸。
<link rel ="stylesheet" href ="../css/common.css" type ="text/css" />
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
