案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 对话框（Dialog） - 模态确认</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <script>
11
  $(function() {
12
    $( "#dialog-confirm" ).dialog({
13
      resizable: false,
14
      height:140,
15
      modal: true,
16
      buttons: {
17
        "Delete all items": function() {
18
          $( this ).dialog( "close" );
19
        },
20
        Cancel: function() {
21
          $( this ).dialog( "close" );
22
        }
23
      }
24
    });
25
  });
26
  </script>
27
</head>
28
<body>
29
30
<div id="dialog-confirm" title="清空回收站吗？">
31
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>这些项目将被永久删除，并且无法恢复。您确定吗？</p>
32
</div>
33
34
<p>Sed vel diam id libero <a href="//www.w3xue.com">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>
35
36
37
</body>
38
</html>