/
demo-modal-only.html
executable file
·91 lines (63 loc) · 6.38 KB
/
demo-modal-only.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Mootools MochaUI</title>
<link rel="stylesheet" type="text/css" id="cssContent" href="themes/default/css/Content.css" />
<link rel="stylesheet" type="text/css" id="cssCore" href="themes/default/css/Core.css" />
<link rel="stylesheet" type="text/css" id="cssWindow" href="themes/default/css/Window.css" />
<!--[if IE]>
<script type="text/javascript" src="scripts/excanvas_r43.js"></script>
<![endif]-->
<script type="text/javascript" src="scripts/mootools-1.2.2-core.js"></script>
<script type="text/javascript" src="scripts/mootools-1.2.2.2-more.js"></script>
<script type="text/javascript" src="scripts/source/Core/Core.js"></script>
<script type="text/javascript" src="scripts/source/Window/Window.js"></script>
<script type="text/javascript" src="scripts/source/Window/Modal.js"></script>
<script type="text/javascript">
function makeModal(){
new MUI.Modal({
id: 'modalDemo',
title: 'A Modal Window',
content: 'Your modal window content',
width: 300,
height: 150
});
}
window.addEvent('load', function(){
$$('.modalDemoLink').each( function(element){
element.addEvent('click', function(e){
new Event(e).stop();
makeModal();
});
});
});
</script>
</head>
<body>
<p>This is a modal demo without the MochaDesktop.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent eget orci. Nunc tortor lacus, volutpat et, placerat a, consectetuer eu, est. Vestibulum fringilla, libero vestibulum aliquet posuere, magna est ullamcorper leo, et dapibus pede tellus id est. Ut at eros. Donec posuere. Proin et mauris congue massa tempor fermentum. Vestibulum nec sem at lacus sollicitudin sodales. Etiam rutrum. Sed dapibus convallis nunc. In sollicitudin ipsum. Phasellus ut dolor. Nam mollis. Quisque ut ligula. Aliquam interdum eros vitae tortor. Vivamus sit amet sapien. Sed ante erat, tristique ac, posuere id, mollis et, leo. Fusce sollicitudin vulputate elit. Mauris fringilla pulvinar eros. Nunc ante libero, pellentesque id, laoreet a, aliquet gravida, quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<select>
<option value ="test1">Test1</option>
<option value ="test2">Test2</option>
<option value ="test3">Test3</option>
<option value ="test4">Test4</option>
</select>
<p>Fusce urna augue, ullamcorper eget, adipiscing a, commodo at, erat. Quisque arcu risus, ullamcorper sit amet, porttitor vitae, mollis eu, dolor. Donec eget orci. Aenean in risus. In vel lectus in massa dignissim scelerisque. Mauris in massa. Curabitur sapien. Nullam venenatis consequat eros. Aenean auctor quam. Suspendisse iaculis consectetuer mi. Praesent eu libero porttitor risus ornare vestibulum. Pellentesque luctus sapien tristique augue. Nam turpis metus, lobortis a, bibendum sit amet, tempor ut, neque. Nulla suscipit elit ac arcu. In hac habitasse platea dictumst. Vivamus velit mi, dignissim non, pellentesque sit amet, adipiscing in, purus. Praesent scelerisque vulputate metus. Vestibulum pede. Quisque enim. Mauris nec libero sagittis erat tempor imperdiet.</p>
<p><a class="modalDemoLink" href="">Demo Modal</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><a class="modalDemoLink" href="">Demo Modal</a></p>
</body>
</html>