1 | <!doctype html> |
---|
2 | <html lang="en"> |
---|
3 | <head> |
---|
4 | <title>jQuery UI Dialog - Basic modal</title> |
---|
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> |
---|
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> |
---|
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> |
---|
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> |
---|
9 | <script type="text/javascript" src="../../ui/ui.resizable.js"></script> |
---|
10 | <script type="text/javascript" src="../../ui/ui.dialog.js"></script> |
---|
11 | <script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script> |
---|
12 | <link type="text/css" href="../demos.css" rel="stylesheet" /> |
---|
13 | <script type="text/javascript"> |
---|
14 | $(function() { |
---|
15 | $("#dialog").dialog({ |
---|
16 | bgiframe: true, |
---|
17 | height: 140, |
---|
18 | modal: true |
---|
19 | }); |
---|
20 | }); |
---|
21 | </script> |
---|
22 | </head> |
---|
23 | <body> |
---|
24 | |
---|
25 | |
---|
26 | <div class="demo"> |
---|
27 | |
---|
28 | <div id="dialog" title="Basic modal dialog"> |
---|
29 | <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p> |
---|
30 | </div> |
---|
31 | |
---|
32 | <!-- Sample page content to illustrate the layering of the dialog --> |
---|
33 | <div class="hiddenInViewSource" style="padding:20px;"> |
---|
34 | <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> |
---|
35 | <form> |
---|
36 | <input value="text input" /><br /> |
---|
37 | <input type="checkbox" />checkbox<br /> |
---|
38 | <input type="radio" />radio<br /> |
---|
39 | <select> |
---|
40 | <option>select</option> |
---|
41 | </select><br /><br /> |
---|
42 | <textarea>textarea</textarea><br /> |
---|
43 | </form> |
---|
44 | </div><!-- End sample page content --> |
---|
45 | |
---|
46 | </div><!-- End demo --> |
---|
47 | |
---|
48 | <div class="demo-description"> |
---|
49 | |
---|
50 | <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> |
---|
51 | |
---|
52 | </div><!-- End demo-description --> |
---|
53 | <? |
---|
54 | if($_GET['broken'] =="True") { |
---|
55 | for ($i=0;$i<2000;$i++) { echo "BLah<br/>"; } |
---|
56 | } else { |
---|
57 | for ($i=0;$i<200;$i++) { echo "BLah<br/>"; } |
---|
58 | } |
---|
59 | ?> |
---|
60 | </body> |
---|
61 | </html> |
---|