Ticket #3327: dialog.html

File dialog.html, 2.4 KB (added by davidb, 12 years ago)

Test file to recreate bug.

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3        <head>
4                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5                <title>jq-ui bug 3327</title>
6                        <link rel="shortcut icon" href="../images/favicon.ico" />
7        <link rel="icon" href="../images/favicon.ico" type="image/x-icon" />
8
9       
10                        <link rel="stylesheet" href="../css/base.css" type="text/css" media="screen">
11                        <link rel="stylesheet" href="../css/functional_demos.css" type="text/css" media="screen">
12                        <link rel="stylesheet" href="../css/chilli-recipes.css" type="text/css" media="screen">
13                        <link rel="stylesheet" href="../../../themes/default/ui.all.css" type="text/css" media="screen" title="Flora (Default)" />
14                        <link rel="stylesheet" href="../../../themes/flora/flora.accordion.css" type="text/css" media="screen" title="Flora (Default)" />
15                        <link rel="stylesheet" href="../../../themes/flora/flora.tabs.css" type="text/css" media="screen" title="Flora (Default)" />
16
17               
18                                        <script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
19                                        <script type="text/javascript" src="../../../ui/ui.core.js"></script>
20                                        <script type="text/javascript" src="../../../ui/ui.dialog.js"></script>
21
22        <style type="text/css">
23                :focus {border: solid red}
24                body { color: white}
25        </style>
26
27        </head>
28        <body>
29                <p>Test file to recreate http://ui.jquery.com/bugs/ticket/3327</p>
30                <p>Note: using :focus {border: solid red} to make focus visually obvious.</p>
31                <p>To recreate:
32                <ol>
33                <li>Put this file in /demos/functional/templates/dialog.html and load in browser (we used FF3)</li>
34                <li>Once page has loaded you should see a button, and two open modal dialogs</li>
35                <ul><li>Bug also present with one dialog</li></ul>
36                <li>bug: focus does not appear in any modal dialog. Hit tab until the button below shows a red border (has focus), can't tab away.</li>
37                </ol>
38                </p>
39                <form>
40                <input id="button" type="button" value="open dialog"></input>
41                <div id="dialog">
42                        <input type="text"></input><br />
43                        jQuery UI Dialog
44            </div>
45                <div id="dialog2">
46                        <input type="text"></input><br />
47                        jQuery UI Dialog2
48            </div>
49                </form>
50                <script type="text/javascript">
51                        $("#dialog").dialog({ modal: true });
52                        $("#dialog2").dialog({ modal: true, position: "left"});
53                        $("#button").click(function () {
54                        $("#dialog").dialog("open");
55                        $("#dialog2").dialog("open");
56                        });
57                </script>
58        </body>
59</html>