visual/dialog/animated.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Dialog Visual Test</title>
        <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
        <script src="../../../jquery-1.9.1.js"></script>
        <script src="../../../ui/jquery.ui.core.js"></script>
        <script src="../../../ui/jquery.ui.widget.js"></script>
        <script src="../../../ui/jquery.ui.mouse.js"></script>
        <script src="../../../ui/jquery.ui.draggable.js"></script>
        <script src="../../../ui/jquery.ui.position.js"></script>
        <script src="../../../ui/jquery.ui.resizable.js"></script>
        <script src="../../../ui/jquery.ui.button.js"></script>
        <script src="../../../ui/jquery.ui.dialog.js"></script>
        <script src="../../../ui/jquery.ui.effect.js"></script>
        <script src="../../../ui/jquery.ui.effect-blind.js"></script>
        <script src="../../../ui/jquery.ui.effect-explode.js"></script>
        <script>
        $(function() {
                $( "#dialog" ).dialog({
                        autoOpen: false,
                        show: {
                                effect: "blind",
                                duration: 1000
                        },
                        hide: {
                                effect: "explode",
                                duration: 1000
                        },
                        modal: true
                });

                $( "#opener" ).click(function() {
                        $( "#dialog" ).dialog( "open" );
                });
        });
        </script>
</head>
<body>

<p>WHAT: A animated modal dialog, using blind effect to show, explode to hide.</p>
<p>EXPECTED: Dialog shows up on top of the overlay and stays there during and after the animation. Focus is set to the input inside the dialog and stays there after the animation finishes.</p>

<div id="dialog" title="Are you sure?">
        <p>Please enter password to continue.</p>
        <label for="password">Password</label><input id="password">
</div>

<button id="opener">Open Dialog</button>

</body>
</html>
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8">
5	<title>Dialog Visual Test</title>
6	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
7	<script src="../../../jquery-1.9.1.js"></script>
8	<script src="../../../ui/jquery.ui.core.js"></script>
9	<script src="../../../ui/jquery.ui.widget.js"></script>
10	<script src="../../../ui/jquery.ui.mouse.js"></script>
11	<script src="../../../ui/jquery.ui.draggable.js"></script>
12	<script src="../../../ui/jquery.ui.position.js"></script>
13	<script src="../../../ui/jquery.ui.resizable.js"></script>
14	<script src="../../../ui/jquery.ui.button.js"></script>
15	<script src="../../../ui/jquery.ui.dialog.js"></script>
16	<script src="../../../ui/jquery.ui.effect.js"></script>
17	<script src="../../../ui/jquery.ui.effect-blind.js"></script>
18	<script src="../../../ui/jquery.ui.effect-explode.js"></script>
19	<script>
20	$(function() {
21	$( "#dialog" ).dialog({
22	autoOpen: false,
23	show: {
24	effect: "blind",
25	duration: 1000
26	},
27	hide: {
28	effect: "explode",
29	duration: 1000
30	},
31	modal: true
32	});
33
34	$( "#opener" ).click(function() {
35	$( "#dialog" ).dialog( "open" );
36	});
37	});
38	</script>
39	</head>
40	<body>
41
42	<p>WHAT: A animated modal dialog, using blind effect to show, explode to hide.</p>
43	<p>EXPECTED: Dialog shows up on top of the overlay and stays there during and after the animation. Focus is set to the input inside the dialog and stays there after the animation finishes.</p>
44
45	<div id="dialog" title="Are you sure?">
46	<p>Please enter password to continue.</p>
47	<label for="password">Password</label><input id="password">
48	</div>
49
50	<button id="opener">Open Dialog</button>
51
52	</body>
53	</html>