|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Traversal Rule test document</title> |
|
5 <meta charset="utf-8" /> |
|
6 <script> |
|
7 var frameContents = '<html>' + |
|
8 '<head><title>such app</title></head>' + |
|
9 '<body>' + |
|
10 '<h1>wow</h1>' + |
|
11 '<label><input type="checkbox">many option</label><br>' + |
|
12 '<label for="r">much range</label>' + |
|
13 '<input min="0" max="10" value="5" type="range" id="r">' + |
|
14 '</body>' + |
|
15 '</html>'; |
|
16 |
|
17 function showAlert() { |
|
18 document.getElementById('alert').hidden = false; |
|
19 } |
|
20 |
|
21 function hideAlert() { |
|
22 document.getElementById('alert').hidden = true; |
|
23 } |
|
24 |
|
25 </script> |
|
26 <style> |
|
27 #windows { |
|
28 position: relative; |
|
29 width: 320px; |
|
30 height: 480px; |
|
31 } |
|
32 |
|
33 #windows > iframe { |
|
34 z-index: 1; |
|
35 } |
|
36 |
|
37 #windows > div[role='dialog'] { |
|
38 z-index: 2; |
|
39 background-color: pink; |
|
40 } |
|
41 |
|
42 #windows > * { |
|
43 position: absolute; |
|
44 width: 100%; |
|
45 height: 100%; |
|
46 } |
|
47 |
|
48 iframe { |
|
49 width: 100%; |
|
50 height: 100%; |
|
51 } |
|
52 |
|
53 </style> |
|
54 |
|
55 </head> |
|
56 <body> |
|
57 <div>Phone status bar</div> |
|
58 <div id="windows"> |
|
59 <div id="appframe"></div> |
|
60 <div role="dialog" id="alert" hidden> |
|
61 <h1>This is an alert!</h1> |
|
62 <p>Do you agree?</p> |
|
63 <button onclick="hideAlert()">Yes</button> |
|
64 <button onclick="hideAlert()">No</button> |
|
65 </div> |
|
66 </div> |
|
67 <button id="home">Home</button> |
|
68 </body> |
|
69 </html> |