本篇文章主要是對JQUERY中dialog的用法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
今天用到了客戶端的對話框，把 jQuery UI 中的對話框學習了一下。 准備 jQuery 環境 首先，我們創建一個按鈕，點擊這個按鈕的時候，將會彈出一個對話框。 <input type="button" value="刪除" id="btn" /> 為了設置這個按鈕點擊的事件，需要准備 jQuery 的環境。 <script type="text/javascript" src="scripts/jquery-1.4.2.js"></script> 在 ready 中設置按鈕的點擊事件。 代碼如下: $(function() { // 初始化 $("#btn").click(function() { alert("btn 被點擊啦！"); } ); 確認這一步沒有問題。 准備對話框 第二步，需要准備對話框的內容。這些內容來自 jQuery UI 的演示文件。 代碼如下: <div id="dialog-confirm" title="Empty the recycle bin?" > <p> <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> These items will be permanently deleted and cannot be recovered. Are you sure?</p> </div> 為了使用 jQuery UI 的對話框，需要增加這些文件的引用。 <script type="text/javascript" src="scripts/jquery.ui.core.js"></script> <script type="text/javascript" src="scripts/jquery.ui.widget.js"></script> <script type="text/javascript" src="scripts/jquery.ui.mouse.js"></script> <script type="text/javascript" src="scripts/jquery.ui.button.js"></script> <script type="text/javascript" src="scripts/jquery.ui.draggable.js"></script> <script type="text/javascript" src="scripts/jquery.ui.position.js"></script> <script type="text/javascript" src="scripts/jquery.ui.dialog.js"></script> 增加樣式 jQuery UI 中使用了大量的樣式來修飾，需要引用 jQuery UI 的樣式，注意，jquery.ui.all.css 這個文件引用了大量的其他樣式文件，將 jQuery UI 中 development-bundlethemesbase 文件夾中的內容都復制過來。 <link type="text/css" href="styles/jquery.ui.all.css" rel="stylesheet" /> 在 ready 函數中，同時也初始化這個對話框。 代碼如下: $(function() { // 初始化 $("#btn").click(function() { alert("btn 被點擊啦！"); }); // 初始化對話框 $("#dialog-confirm").dialog(); }); 現在，打開這個頁面的時候，就已經可以看到對話框了。 通過按鈕彈出對話框 我們希望頁面上初始化的時候看不到這個對話框，在點擊按鈕的時候再出現。那麼需要這幾個工作。 先給對話框增加一個默認不顯示的樣式。style="display: none"，這樣默認就不會看到這一部分。 碼如下: <div id="dialog-confirm" title="Empty the recycle bin?" style="display: none"> <p> <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> These items will be permanently deleted and cannot be recovered. Are you sure?</p> </div> 然後，在初始化對話框的時候，也不顯示，僅僅完成初始化工作。 在初始化對話框的時候，傳遞一個參數 autoOpen: false 代碼如下: $("#dialog-confirm").dialog( { autoOpen: false } ); 在按鈕的點擊事件中，彈出這個對話框。 代碼如下: $("#btn").click(function() { // alert("btn 被點擊啦！"); $("#dialog-confirm").dialog("open"); }); 如果傳遞 close ，將會關閉對話框。 實現模式對話框 在實際應用中，我們經常需要實現模式對話框，在 Web 中需要增加一個遮罩層來擋住底層的元素，模擬模式效果，這可以在初始化對話框的時候，傳遞一個參數 modal: true 來實現。修改之後的初始化代碼成為： 代碼如下: $("#dialog-confirm").dialog( { modal: true, // 創建模式對話框 autoOpen: false, // 只初始化，不顯示 } ); 增加對話框的按鈕 可以為對話框增加任意的按鈕，並自定義按鈕的事件處理。我們先增加兩個按鈕，一個確定，一個取消，並讓他們先關閉對話框。 代碼如下: // 初始化對話框 $("#dialog-confirm").dialog( { modal: true, // 創建模式對話框 autoOpen: false, buttons: { "Ok": function() { $(this).dialog('close'); }, "Cancel": function() { $(this).dialog('close'); } } });