← Back to branch summary

~jhullu/pyshot/current

« back to all changes in this revision

Viewing changes to trunk/src/pyshot_server/src/www/jscripts/jquery-ui-1.8.6.custom/development-bundle/demos/dialog/modal.html

  • Committer: Jacques HULLU
  • Date: 2010-11-29 22:28:24 UTC
  • Revision ID: jacques@hullu.fr-20101129222824-317nrpjt6vks87dg
fix some bugs

Show diffs side-by-side

added added

removed removed

Lines of Context:
trunk/src/pyshot_server/src/www/jscripts/jquery-ui-1.8.6.custom/development-bundle/demos/dialog/modal.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
        <meta charset="utf-8">
 
5
        <title>jQuery UI Dialog - Basic modal</title>
 
6
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
 
7
        <script src="../../jquery-1.4.3.js"></script>
 
8
        <script src="../../external/jquery.bgiframe-2.1.2.js"></script>
 
9
        <script src="../../ui/jquery.ui.core.js"></script>
 
10
        <script src="../../ui/jquery.ui.widget.js"></script>
 
11
        <script src="../../ui/jquery.ui.mouse.js"></script>
 
12
        <script src="../../ui/jquery.ui.draggable.js"></script>
 
13
        <script src="../../ui/jquery.ui.position.js"></script>
 
14
        <script src="../../ui/jquery.ui.resizable.js"></script>
 
15
        <script src="../../ui/jquery.ui.dialog.js"></script>
 
16
        <link rel="stylesheet" href="../demos.css">
 
17
        <script>
 
18
        $(function() {
 
19
                // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
 
20
                $( "#dialog:ui-dialog" ).dialog( "destroy" );
 
21
        
 
22
                $( "#dialog-modal" ).dialog({
 
23
                        height: 140,
 
24
                        modal: true
 
25
                });
 
26
        });
 
27
        </script>
 
28
</head>
 
29
<body>
 
30
 
 
31
<div class="demo">
 
32
 
 
33
<div id="dialog-modal" title="Basic modal dialog">
 
34
        <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
 
35
</div>
 
36
 
 
37
<!-- Sample page content to illustrate the layering of the dialog -->
 
38
<div class="hiddenInViewSource" style="padding:20px;">
 
39
        <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>
 
40
        <form>
 
41
                <input value="text input" /><br />
 
42
                <input type="checkbox" />checkbox<br />
 
43
                <input type="radio" />radio<br />
 
44
                <select>
 
45
                        <option>select</option>
 
46
                </select><br /><br />
 
47
                <textarea>textarea</textarea><br />
 
48
        </form>
 
49
</div><!-- End sample page content -->
 
50
 
 
51
</div><!-- End demo -->
 
52
 
 
53
 
 
54
 
 
55
<div class="demo-description">
 
56
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
 
57
</div><!-- End demo-description -->
 
58
 
 
59
</body>
 
60
</html>