jQuery UI 實例-對話框（Dialog）

認功能

基本的對話框窗口是一個定位于視區中的覆蓋層，同時通過一個 iframe 與頁面內容分隔開（就像 select 元素）。它由一個標題欄和一個內容區域組成，且可以移動，調整尺寸，默認可通過 'x' 圖標關閉。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 默認功能</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog" ).dialog(); }); </script> </head> <body> <div id="dialog" title="基本的對話框"> <p>這是一個默認的對話框，用于顯示信息。對話框窗口可以移動，調整尺寸，默認可通過 'x' 圖標關閉。</p> </div> </body> </html>

查看演示

動畫

可以通過為 show/hide 屬性指定一個特效來動畫顯示對話框。您必須為想使用的特效引用獨立的特效文件。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 動畫</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); </script> </head> <body> <div id="dialog" title="Basic dialog"> <p>這是一個動畫顯示的對話框，用于顯示信息。對話框窗口可以移動，調整尺寸，默認可通過 'x' 圖標關閉。</p> </div> <button id="opener">打開對話框</button> </body> </html>

查看演示

基本的模態

模態對話框防止用戶與對話框以外的頁面其他部分進行交互，直到對話框關閉為止。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 基本的模態</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog-modal" ).dialog({ height: 140, modal: true }); }); </script> </head> <body> <div id="dialog-modal" title="基本的模態對話框"> <p>添加模態覆蓋屏幕，讓對話框看起來更突出，因為它讓頁面上其他內容變暗。</p> </div> <p>Sed vel diam id libero <a >rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>

查看演示

模態確認

確認一個動作可能是破壞性的也可能是有意義的。設置 modal 選項為 true，并通過 buttons 選項來指定主要的和次要的用戶動作。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態確認</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); }); </script> </head> <body> <div id="dialog-confirm" title="清空回收站嗎？"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>這些項目將被永久刪除，并且無法恢復。您確定嗎？</p> </div> <p>Sed vel diam id libero <a >rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>

模態表單

使用模態對話框來請求用戶在一個多步驟過程中輸入數據。在內容區域嵌入 form 標記，設置 modal 選項為 true，并通過 buttons 選項來指定主要的和次要的用戶動作。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態表單</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <style> body { font-size: 62.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } </style> <script> $(function() { var name = $( "#name" ), email = $( "#email" ), password = $( "#password" ), allFields = $( [] ).add( name ).add( email ).add( password ), tips = $( ".validateTips" ); function updateTips( t ) { tips .text( t ) .addClass( "ui-state-highlight" ); setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 ); } function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { o.addClass( "ui-state-error" ); updateTips( "" + n + " 的長度必須在 " + min + " 和 " + max + " 之間。" ); return false; } else { return true; } } function checkRegexp( o, regexp, n ) { if ( !( regexp.test( o.val() ) ) ) { o.addClass( "ui-state-error" ); updateTips( n ); return false; } else { return true; } } $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "創建一個帳戶": function() { var bValid = true; allFields.removeClass( "ui-state-error" ); bValid = bValid && checkLength( name, "username", 3, 16 ); bValid = bValid && checkLength( email, "email", 6, 80 ); bValid = bValid && checkLength( password, "password", 5, 16 ); bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "用戶名必須由 a-z、0-9、下劃線組成，且必須以字母開頭。" ); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" ); bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "密碼字段只允許： a-z 0-9" ); if ( bValid ) { $( "#users tbody" ).append( "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>" ); $( this ).dialog( "close" ); } }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); }); }); </script> </head> <body> <div id="dialog-form" title="創建新用戶"> <p>所有的表單字段都是必填的。</p> <form> <fieldset> <label for="name">名字</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all"> <label for="email">郵箱</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"> <label for="password">密碼</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"> </fieldset> </form> </div> <div id="users-contain"> <h1>已有的用戶：</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>名字</th> <th>郵箱</th> <th>密碼</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>johndoe1</td> </tr> </tbody> </table> </div> <button id="create-user">創建新用戶</button> </body> </html>

模態消息

使用模態對話框來在下一步動作執行之前確認信息和動作。設置 modal 選項為 true，并通過 buttons 選項來指定主要的動作（Ok）。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態消息</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); }); </script> </head> <body> <div id="dialog-message" title="下載完成"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 您的文件已經成功下載到文件夾中。 </p> <p> 當前使用存儲空間的 <b>36%</b>。 </p> </div> <p>Sed vel diam id libero <a >rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>

件結構

主題是以特定的方式來增加他們的易用性。通常，文件目錄結構如下所示：

themename/ – 您的主題必須完全包含在一個單獨的以主題名稱命名的文件夾內。
themename/themename.css – 這是基本的 CSS 文件。無論使用了哪個插件，該文件都必須在每個使用主題的頁面中引用。該文件應該是輕量級的，只包括要點。
themename/themename.pluginname.css – 您支持的每個插件都需要一個 CSS 文件。插件的名稱應直接包含在文件名中。例如，如果您為 tabs（標簽頁）插件進行主題化，則有：themename.tabs.js。
themename/img.png – 您的主題可以包含圖像。它們可以根據您的喜好進行命名，這里沒有特定的命名慣例。

如需了解主題文件結構是如何完成的實例，請訪問 jQuery UI 基本主題。

定義樣式

為主題編寫樣式是非常簡單的，這是因為主題的靈活性。

所有的主題都應該有一個基本的 CSS class。這個主要的 class 允許用戶啟用禁用主題。您的根 class 的格式應該是 .ui-themename。且它在 HTML 文件中的用法如下所示：

<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="themename/themename.css" />
<link rel="stylesheet" href="othertheme/othertheme.css" />
<link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
<div class="ui-othertheme">
<div class="ui-dialog">This is a modal dialog.</div>
</div>
</body>
</html>

在上面的實例中，發生了一些重要的事情：

我們同時向文檔中加載兩個主題。
整個頁面機器所有內容，是根據 themename 的樣式進行主題化的。
然而，帶有 ui-othertheme class 的 <div>及其中的每個元素（包括模態對話框）都是根據 othertheme 的樣式進行主題化的。

如果我們打開 themename.css 文件進行查看，我們可以看到如下代碼：

body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }

請注意，themename.css 文件只包括全局通用的樣式信息，特定插件的樣式信息不在這里進行定義。這里的樣式對所有主題都是適用的。不用擔心一個主題會占據多個文件 - 這些會在創建和下載的過程被簡化。

ndex.html

<html>

<head>

</head>

<body>

//alert(1);

function pop(){

//傳遞參數到模態窗口

var obj=new Object();

obj.name="Hello World---來自父窗口";

var returnStr = window.showModalDialog("model.html",obj,

"dialogHeight=200px;dialogTop=200px;dialogLeft=200px;");

alert("模態窗口返回參數"+returnStr);

//刷新頁面

window.location.reload();

}

</script>

<button onClick="pop()">打開模態窗口</button>

<p>模態窗口傳參數，并獲取返回值</p>

</body>

</html>

model.html

<html>

<head>

</head>

<body>

// 接受父窗口的參數

var obj=window.dialogArguments;

alert(obj.name);

// 返回參數到父窗口

window.returnValue=’Hello World---來自模態窗口’;

</script>

模態窗口

</body>

</html>

如果直接在瀏覽器中無法正常運行，那么就將其放在服務器容器中。

在線咨詢

上一篇：CSS 按鈕
下一篇：PSD轉HTML新秘訣，拿走不謝！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery UI 實例-對話框（Dialog）

您的項目需求