Ticket #5166: modaliframe.html

File modaliframe.html, 2.3 KB (added by bitwalker, 12 years ago)

demo dialog page with iframe

Line 
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.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.dialog.js"></script>
15        <link type="text/css" href="../demos.css" rel="stylesheet" />
16        <script type="text/javascript">
17        $(function() {
18                // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
19                $("#dialog").dialog("destroy");
20                       
21                $("#dialog-modal").dialog({
22                        height: 140,
23                        modal: true
24                });
25        });
26        </script>
27</head>
28<body>
29
30
31<div class="demo">
32
33<div id="dialog-modal" title="Basic modal dialog">
34        <p>Dialog message with iframe.</p>
35    <iframe src="iframe.html"/>
36</div>
37
38<!-- Sample page content to illustrate the layering of the dialog -->
39<div class="hiddenInViewSource" style="padding:20px;">
40        <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>
41        <form>
42                <input value="text input" /><br />
43                <input type="checkbox" />checkbox<br />
44                <input type="radio" />radio<br />
45                <select>
46                        <option>select</option>
47                </select><br /><br />
48                <textarea>textarea</textarea><br />
49        </form>
50</div><!-- End sample page content -->
51
52</div><!-- End demo -->
53
54<div class="demo-description">
55
56<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>
57
58</div><!-- End demo-description -->
59
60</body>
61</html>