Ticket #4363: modal-datepicker.html

File modal-datepicker.html, 2.7 KB (added by btburnett3, 12 years ago)

Bug/Patch Demo File

Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <title>jQuery UI Dialog - Modal with datepicker</title>
5        <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6        <script type="text/javascript" src="../../jquery-1.4.1.js"></script>
7        <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script>
8        <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9        <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10        <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11        <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
12        <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
13        <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
14        <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
15        <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
16        <link type="text/css" href="../demos.css" rel="stylesheet" />
17        <style type="text/css">
18                #ui-datepicker-div {z-index: 10000}
19        </style>
20        <script type="text/javascript">
21        $(function() {
22                // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
23                $("#dialog").dialog("destroy");
24               
25                $("#date").datepicker({ changeMonth: true, changeYear: true});
26       
27                $("#dialog-modal").dialog({
28                        height: 140,
29                        modal: true
30                });
31        });
32        </script>
33</head>
34<body>
35
36
37<div class="demo">
38
39<div id="dialog-modal" title="Basic modal dialog">
40        <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
41       
42        <p><input type="text" id="date" /></p>
43</div>
44
45<!-- Sample page content to illustrate the layering of the dialog -->
46<div class="hiddenInViewSource" style="padding:20px;">
47        <p>Sed vel diam id libero <a href="http://example.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>
48        <form>
49                <input value="text input" /><br />
50                <input type="checkbox" />checkbox<br />
51                <input type="radio" />radio<br />
52                <select>
53                        <option>select</option>
54                </select><br /><br />
55                <textarea>textarea</textarea><br />
56        </form>
57</div><!-- End sample page content -->
58
59</div><!-- End demo -->
60
61<div class="demo-description">
62
63<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.  To add a semi-transparent layer that dims out the page content behind the dialog, set the background color and opacity of the <code>overlay</code> option.</p>
64
65</div><!-- End demo-description -->
66
67</body>
68</html>