jQuery 入门教程(34): jQuery UI Dialog 示例（二）
模式对话框
如想对话框显示为模式的，可以通过配置modal: true来设置。
1<!doctype html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <title>jQuery UI Demos</title>6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 <script src="scripts/jquery-1.9.1.js"></script>8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>9 <script>10 $(function () {11 $("#dialog-modal").dialog({12 height: 140,13 modal: true14 });15 });16 </script>17</head>18<body>19 20 <div id="dialog-modal" title="Basic modal dialog">21 <p>22 Adding the modal overlay screen makes the dialog23 look more prominent because it dims out the page content.24 </p>25 </div>26 27 <p>28 Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>.29 Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante.30 Etiam bibendum, enim faucibus aliquet rhoncus,31 arcu felis ultricies neque, sit amet auctor elit eros a lectus.32 </p>33</body>34</html>
添加确认和取消按钮
可以通过配置主按钮，和从按钮的方法来为对话框添加按钮，此时如果需要把”X”从右上角去掉，可以通过CSS来实现，具体可以参考下例：使用dialogClass: “no-close”
1<!doctype html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <title>jQuery UI Demos</title>6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 <script src="scripts/jquery-1.9.1.js"></script>8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>9 <style>10 .no-close .ui-dialog-titlebar-close {11 display: none;12 }13 </style>14 <script>15 $(function () {16 $("#dialog-confirm").dialog({17 dialogClass: "no-close",18 resizable: false,19 width: 400,20 height: 250,21 modal: true,22 buttons: {23 "Delete all items": function () {24 $(this).dialog("close");25 },26 Cancel: function () {27 $(this).dialog("close");28 }29 }30 });31 });32 </script>33</head>34<body>35 36 <div id="dialog-confirm" title="Empty the recycle bin?">37 <p>38 39 <span class="ui-icon ui-icon-alert"40 style="float: left; margin: 0 7px 20px 0;"></span>41 These items will be permanently deleted42 and cannot be recovered. Are you sure?43 </p>44 </div>45 46 <p>47 Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>.48 Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante.49 Etiam bibendum, enim faucibus aliquet rhoncus,50 arcu felis ultricies neque,51 sit amet auctor elit eros a lectus.52 </p>53 54 55</body>56</html>