实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
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="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
7
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
8
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <script>
11
  $(function() {
12
    $( "#dialog" ).dialog({
13
      autoOpen: false,
14
      show: {
15
        effect: "blind",
16
        duration: 1000
17
      },
18
      hide: {
19
        effect: "explode",
20
        duration: 1000
21
      }
22
    });
23
24
    $( "#opener" ).click(function() {
25
      $( "#dialog" ).dialog( "open" );
26
    });
27
  });
28
  </script>
29
</head>
30
<body>
31
32
<div id="dialog" title="Basic dialog">
33
  <p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
34
</div>
35
36
<button id="opener">打开对话框</button>
37
38
39
</body>
40
</html>