forked from tweego/JeeGooPopup
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
195 lines (181 loc) · 11.9 KB
/
index.htm
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Jeegoopopup, a jQuery popup plugin</title>
<link href="style.css" rel="Stylesheet" type="text/css" />
<link href="jeegoopopup/skins/basic/style.css" rel="Stylesheet" type="text/css" />
<link href="jeegoopopup/skins/black/style.css" rel="Stylesheet" type="text/css" />
<link href="jeegoopopup/skins/blue/style.css" rel="Stylesheet" type="text/css" />
<link href="jeegoopopup/skins/clean/style.css" rel="Stylesheet" type="text/css" />
<link href="jeegoopopup/skins/gray/style.css" rel="Stylesheet" type="text/css" />
<link href="jeegoopopup/skins/round/style.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jeegoopopup/jquery.jeegoopopup.1.0.0.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
// Open popup on button click.
$('#openpopup').click(function(){
var options = {
width: parseInt($('#width').val()) || 'auto',
height: parseInt($('#height').val()) || 'auto',
center: $('#center').is(':checked'),
fixed: $('#fixed').is(':checked'),
skinClass: $('#skin').val(),
overlay: $('#overlay').is(':checked'),
overlayColor: $('#color').val(),
fadeIn: parseInt($('#fadeIn').val()) || 0,
draggable: $('#draggable').is(':checked'),
resizable: $('#resizable').is(':checked'),
scrolling: $('#scrolling').val(),
parentScrolling: $('#parentScrolling').is(':checked'),
title: $('#title').val()
};
var left = parseInt($('#left').val());
if(!isNaN(left))
options.left = left;
var top = parseInt($('#top').val());
if(!isNaN(top))
options.top = top;
var right = parseInt($('#right').val());
if(!isNaN(right))
options.right = right;
var bottom = parseInt($('#bottom').val());
if(!isNaN(bottom))
options.bottom = bottom;
var opacity = parseFloat($('#opacity').val());
if(!isNaN(opacity))
options.opacity = opacity;
if($('#html').is(':checked'))
options.html = $('#html_content').val();
else
options.url = $('#url').val();
$.jeegoopopup.open(options);
});
});
//]]>
</script>
</head>
<body>
<div id="outer">
<div id="header">
<h1><span class="jg_red">J</span><span class="jg_green">ee</span><span class="jg_yellow">g</span><span class="jg_blue">oo</span>popup, <span style="font-size:.7em">a jQuery popup plugin</span></h1>
Copyright © 2009 - 2013 <a href="http://www.tweego.nl" target="_blank">TweeGo</a>: <a href="http://www.tweego.nl/jeegoopopup" target="_blank">http://www.tweego.nl/jeegoopopup</a>
</div>
<div id="content">
<div style="width:900px; margin:0 auto">
<div style="text-align:center">
<p>Edit any of these properties and use the button in the top-right corner to open a popup.
Properties can easily be edited from within a (same domain) popup iframe by calling <strong>window.parent.$.jeegoopopup.PROPERTYNAME(value);</strong>
For example, to edit the width and height of a popup from within the iframe call window.parent.$.jeegoopopup.width(600).height(200);
</p>
<input id="openpopup" type="button" value="Open popup" class="button" />
</div>
<div style="width:50%; float:left">
<h2>Dimensions & Position</h2>
<div class="row">
<label for="width">Width</label><input id="width" type="text" value="500" class="text" /> px
</div>
<div class="row">
<label for="height">Height</label><input id="height" type="text" value="600" class="text" /> px
</div>
<div class="row">
<label for="left">Left</label><input id="left" type="text" class="text" /> px
</div>
<div class="row">
<label for="top">Top</label><input id="top" type="text" class="text" /> px
</div>
<div class="row">
<label for="right">Right</label><input id="right" type="text" class="text" /> px
</div>
<div class="row">
<label for="bottom">Bottom</label><input id="bottom" type="text" class="text" /> px
</div>
<div class="row">
<label>Center</label><input type="radio" id="center" name="center" checked="checked" /> Yes <input type="radio" name="center" /> No
</div>
<div class="row">
<label>Position fixed</label><input type="radio" id="fixed" name="fixed" checked="checked" /> Yes <input type="radio" name="fixed" /> No
</div>
</div>
<div style="width:50%; float:right">
<h2>Appearance & Overlay</h2>
<div class="row">
<label for="skin">Skin</label><select id="skin">
<option value="jg_popup_basic">Basic</option>
<option value="jg_popup_black">Black</option>
<option value="jg_popup_blue">Blue</option>
<option value="jg_popup_clean">Clean</option>
<option value="jg_popup_gray">Gray</option>
<option value="jg_popup_round">Round</option>
</select>
</div>
<div class="row">
<label>Show overlay</label><input type="radio" id="overlay" name="overlay" checked="checked" /> Yes <input type="radio" name="overlay" /> No
</div>
<div class="row">
<label for="opacity">Overlay opacity</label><input id="opacity" type="text" value="50" class="text" /> (0 - 100)
</div>
<div class="row">
<label for="color">Overlay color</label><select id="color">
<option value="#000">Black</option>
<option value="#fff">White</option>
<option value="#f00">Red</option>
<option value="#0f0">Green</option>
<option value="#00f">Blue</option>
</select>
</div>
</div>
<div style="clear:both"></div>
<div style="width:50%; float:left">
<h2>Behavior</h2>
<div class="row">
<label for="fadeIn">Fade-in</label><input id="fadeIn" type="text" value="300" class="text" /> ms
</div>
<div class="row">
<label>Draggable</label><input type="radio" id="draggable" name="draggable" checked="checked" /> Yes <input type="radio" name="draggable" /> No
</div>
<div class="row">
<label>Resizable</label><input type="radio" id="resizable" name="resizable" checked="checked" /> Yes <input type="radio" name="resizable" /> No
</div>
<div class="row">
<label for="scrolling">Overflow scrolling</label><select id="scrolling">
<option value="yes">Yes</option>
<option value="no">No</option>
<option value="auto" selected="selected">Auto</option>
</select>
</div>
<div class="row">
<label>Parent scrolling</label><input type="radio" id="parentScrolling" name="parentScrolling" checked="checked" /> Yes <input type="radio" name="parentScrolling" /> No
</div>
</div>
<div style="width:50%; float:right">
<h2>Content</h2>
<div class="row">
<label for="title">Title</label><input id="title" type="text" value="" class="text" />
</div>
<div class="row">
<label for="html">Html</label><input type="radio" id="html" name="type" />
</div>
<div class="row">
<label></label><textarea id="html_content" class="text" style="height:100px"><h3>Lorem ipsum dolor</h3>Donec eu arcu varius, tincidunt elit at, hendrerit justo. Vivamus cursus interdum metus. Donec sagittis, purus non aliquet condimentum, dui erat semper dolor, sed interdum enim nibh sit amet lectus. Fusce gravida, tellus vel fringilla sollicitudin, dui leo iaculis odio, vitae imperdiet dolor orci a enim. Aenean sollicitudin pharetra eros. Fusce ut nunc condimentum, imperdiet urna eget, vulputate lacus. Duis urna ante, lacinia ac molestie eget, convallis vel mauris. Vestibulum id dui eget neque convallis suscipit. Donec suscipit quam eu urna euismod, non dapibus felis viverra. In et sapien nibh. Curabitur vitae leo rutrum, porttitor dui id, molestie massa.
Cras ut mauris sem. Mauris est turpis, suscipit egestas faucibus ac, ornare a ante. Ut sed augue eros. Quisque cursus accumsan est, non dapibus mauris consectetur consectetur. Morbi laoreet, purus ut porttitor volutpat, justo ligula porttitor ligula, ac dignissim felis ligula in ante. Suspendisse potenti. Aliquam et magna in nibh varius pretium eget sit amet tortor. Pellentesque ornare ligula tellus, id sodales urna porttitor quis. Pellentesque egestas nulla nunc, sit amet auctor odio dictum ut. Nulla velit tellus, facilisis et cursus eget, bibendum in massa.
Curabitur diam nisl, aliquam vitae tincidunt ut, eleifend eget urna. Praesent vel tincidunt neque, eget vulputate eros. Proin vel dictum eros. Fusce accumsan consectetur nisi cursus cursus. Mauris rutrum eu odio in tincidunt. Suspendisse a euismod nibh, quis eleifend nisl. Nam ultrices luctus tellus eu laoreet. Aliquam semper dictum dui et gravida. Fusce quis dignissim mi, quis lobortis mi. Nunc pretium lacus vitae urna porttitor, eu semper quam vestibulum. Nunc euismod at diam non aliquet. Donec molestie purus sit amet pulvinar semper. Donec porta lorem eget dui pharetra semper. Phasellus vestibulum, metus vitae pulvinar interdum, nulla mi vulputate tellus, sed dignissim lectus nunc non enim. Aliquam erat volutpat. Ut tincidunt turpis quis fringilla varius.
</textarea>
</div>
<div class="row">
<label for="html">Url</label><input type="radio" id="iframe" name="type" checked="checked" />
</div>
<div class="row">
<label></label><input id="url" type="text" value="iframe.htm" class="text" />
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
<a id="next" href="confirm.htm">Use popup as confirm dialog</a>
<!-- Big div to cause horizontal/vertical scrolling -->
<div style="width:3000px; height:3000px"></div>
</body>
</html>