|
1 <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> --> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <head> |
|
4 <title>Template for dialogs</title> |
|
5 <link rel="stylesheet" type="text/css" href="skins/clearlooks2/window.css" /> |
|
6 </head> |
|
7 <body> |
|
8 |
|
9 <div class="mceEditor"> |
|
10 <div class="clearlooks2" style="width:400px; height:100px; left:10px;"> |
|
11 <div class="wrapper"> |
|
12 <div class="top"> |
|
13 <div class="left"></div> |
|
14 <div class="center"></div> |
|
15 <div class="right"></div> |
|
16 <span>Blured</span> |
|
17 </div> |
|
18 |
|
19 <div class="middle"> |
|
20 <div class="left"></div> |
|
21 <span>Content</span> |
|
22 <div class="right"></div> |
|
23 </div> |
|
24 |
|
25 <div class="bottom"> |
|
26 <div class="left"></div> |
|
27 <div class="center"></div> |
|
28 <div class="right"></div> |
|
29 <span>Statusbar text.</span> |
|
30 </div> |
|
31 |
|
32 <a class="move" href="#"></a> |
|
33 <a class="min" href="#"></a> |
|
34 <a class="max" href="#"></a> |
|
35 <a class="med" href="#"></a> |
|
36 <a class="close" href="#"></a> |
|
37 <a class="resize resize-n" href="#"></a> |
|
38 <a class="resize resize-s" href="#"></a> |
|
39 <a class="resize resize-w" href="#"></a> |
|
40 <a class="resize resize-e" href="#"></a> |
|
41 <a class="resize resize-nw" href="#"></a> |
|
42 <a class="resize resize-ne" href="#"></a> |
|
43 <a class="resize resize-sw" href="#"></a> |
|
44 <a class="resize resize-se" href="#"></a> |
|
45 </div> |
|
46 </div> |
|
47 |
|
48 <div class="clearlooks2" style="width:400px; height:100px; left:420px;"> |
|
49 <div class="wrapper movable focus"> |
|
50 <div class="top"> |
|
51 <div class="left"></div> |
|
52 <div class="center"></div> |
|
53 <div class="right"></div> |
|
54 <span>Focused</span> |
|
55 </div> |
|
56 |
|
57 <div class="middle"> |
|
58 <div class="left"></div> |
|
59 <span>Content</span> |
|
60 <div class="right"></div> |
|
61 </div> |
|
62 |
|
63 <div class="bottom"> |
|
64 <div class="left"></div> |
|
65 <div class="center"></div> |
|
66 <div class="right"></div> |
|
67 <span>Statusbar text.</span> |
|
68 </div> |
|
69 |
|
70 <a class="move" href="#"></a> |
|
71 <a class="min" href="#"></a> |
|
72 <a class="max" href="#"></a> |
|
73 <a class="med" href="#"></a> |
|
74 <a class="close" href="#"></a> |
|
75 <a class="resize resize-n" href="#"></a> |
|
76 <a class="resize resize-s" href="#"></a> |
|
77 <a class="resize resize-w" href="#"></a> |
|
78 <a class="resize resize-e" href="#"></a> |
|
79 <a class="resize resize-nw" href="#"></a> |
|
80 <a class="resize resize-ne" href="#"></a> |
|
81 <a class="resize resize-sw" href="#"></a> |
|
82 <a class="resize resize-se" href="#"></a> |
|
83 </div> |
|
84 </div> |
|
85 |
|
86 <div class="clearlooks2" style="width:400px; height:100px; left:10px; top:120px;"> |
|
87 <div class="wrapper movable focus statusbar"> |
|
88 <div class="top"> |
|
89 <div class="left"></div> |
|
90 <div class="center"></div> |
|
91 <div class="right"></div> |
|
92 <span>Statusbar</span> |
|
93 </div> |
|
94 |
|
95 <div class="middle"> |
|
96 <div class="left"></div> |
|
97 <span>Content</span> |
|
98 <div class="right"></div> |
|
99 </div> |
|
100 |
|
101 <div class="bottom"> |
|
102 <div class="left"></div> |
|
103 <div class="center"></div> |
|
104 <div class="right"></div> |
|
105 <span>Statusbar text.</span> |
|
106 </div> |
|
107 |
|
108 <a class="move" href="#"></a> |
|
109 <a class="min" href="#"></a> |
|
110 <a class="max" href="#"></a> |
|
111 <a class="med" href="#"></a> |
|
112 <a class="close" href="#"></a> |
|
113 <a class="resize resize-n" href="#"></a> |
|
114 <a class="resize resize-s" href="#"></a> |
|
115 <a class="resize resize-w" href="#"></a> |
|
116 <a class="resize resize-e" href="#"></a> |
|
117 <a class="resize resize-nw" href="#"></a> |
|
118 <a class="resize resize-ne" href="#"></a> |
|
119 <a class="resize resize-sw" href="#"></a> |
|
120 <a class="resize resize-se" href="#"></a> |
|
121 </div> |
|
122 </div> |
|
123 |
|
124 <div class="clearlooks2" style="width:400px; height:100px; left:420px; top:120px;"> |
|
125 <div class="wrapper movable focus statusbar resizable"> |
|
126 <div class="top"> |
|
127 <div class="left"></div> |
|
128 <div class="center"></div> |
|
129 <div class="right"></div> |
|
130 <span>Statusbar, Resizable</span> |
|
131 </div> |
|
132 |
|
133 <div class="middle"> |
|
134 <div class="left"></div> |
|
135 <span>Content</span> |
|
136 <div class="right"></div> |
|
137 </div> |
|
138 |
|
139 <div class="bottom"> |
|
140 <div class="left"></div> |
|
141 <div class="center"></div> |
|
142 <div class="right"></div> |
|
143 <span>Statusbar text.</span> |
|
144 </div> |
|
145 |
|
146 <a class="move" href="#"></a> |
|
147 <a class="min" href="#"></a> |
|
148 <a class="max" href="#"></a> |
|
149 <a class="med" href="#"></a> |
|
150 <a class="close" href="#"></a> |
|
151 <a class="resize resize-n" href="#"></a> |
|
152 <a class="resize resize-s" href="#"></a> |
|
153 <a class="resize resize-w" href="#"></a> |
|
154 <a class="resize resize-e" href="#"></a> |
|
155 <a class="resize resize-nw" href="#"></a> |
|
156 <a class="resize resize-ne" href="#"></a> |
|
157 <a class="resize resize-sw" href="#"></a> |
|
158 <a class="resize resize-se" href="#"></a> |
|
159 </div> |
|
160 </div> |
|
161 |
|
162 <div class="clearlooks2" style="width:400px; height:100px; left:10px; top:230px;"> |
|
163 <div class="wrapper movable focus resizable maximizable"> |
|
164 <div class="top"> |
|
165 <div class="left"></div> |
|
166 <div class="center"></div> |
|
167 <div class="right"></div> |
|
168 <span>Resizable, Maximizable</span> |
|
169 </div> |
|
170 |
|
171 <div class="middle"> |
|
172 <div class="left"></div> |
|
173 <span>Content</span> |
|
174 <div class="right"></div> |
|
175 </div> |
|
176 |
|
177 <div class="bottom"> |
|
178 <div class="left"></div> |
|
179 <div class="center"></div> |
|
180 <div class="right"></div> |
|
181 <span>Statusbar text.</span> |
|
182 </div> |
|
183 |
|
184 <a class="move" href="#"></a> |
|
185 <a class="min" href="#"></a> |
|
186 <a class="max" href="#"></a> |
|
187 <a class="med" href="#"></a> |
|
188 <a class="close" href="#"></a> |
|
189 <a class="resize resize-n" href="#"></a> |
|
190 <a class="resize resize-s" href="#"></a> |
|
191 <a class="resize resize-w" href="#"></a> |
|
192 <a class="resize resize-e" href="#"></a> |
|
193 <a class="resize resize-nw" href="#"></a> |
|
194 <a class="resize resize-ne" href="#"></a> |
|
195 <a class="resize resize-sw" href="#"></a> |
|
196 <a class="resize resize-se" href="#"></a> |
|
197 </div> |
|
198 </div> |
|
199 |
|
200 <div class="clearlooks2" style="width:400px; height:100px; left:420px; top:230px;"> |
|
201 <div class="wrapper movable statusbar resizable maximizable"> |
|
202 <div class="top"> |
|
203 <div class="left"></div> |
|
204 <div class="center"></div> |
|
205 <div class="right"></div> |
|
206 <span>Blurred, Maximizable, Statusbar, Resizable</span> |
|
207 </div> |
|
208 |
|
209 <div class="middle"> |
|
210 <div class="left"></div> |
|
211 <span>Content</span> |
|
212 <div class="right"></div> |
|
213 </div> |
|
214 |
|
215 <div class="bottom"> |
|
216 <div class="left"></div> |
|
217 <div class="center"></div> |
|
218 <div class="right"></div> |
|
219 <span>Statusbar text.</span> |
|
220 </div> |
|
221 |
|
222 <a class="move" href="#"></a> |
|
223 <a class="min" href="#"></a> |
|
224 <a class="max" href="#"></a> |
|
225 <a class="med" href="#"></a> |
|
226 <a class="close" href="#"></a> |
|
227 <a class="resize resize-n" href="#"></a> |
|
228 <a class="resize resize-s" href="#"></a> |
|
229 <a class="resize resize-w" href="#"></a> |
|
230 <a class="resize resize-e" href="#"></a> |
|
231 <a class="resize resize-nw" href="#"></a> |
|
232 <a class="resize resize-ne" href="#"></a> |
|
233 <a class="resize resize-sw" href="#"></a> |
|
234 <a class="resize resize-se" href="#"></a> |
|
235 </div> |
|
236 </div> |
|
237 |
|
238 <div class="clearlooks2" style="width:400px; height:100px; left:10px; top:340px;"> |
|
239 <div class="wrapper movable focus resizable maximized minimizable maximizable"> |
|
240 <div class="top"> |
|
241 <div class="left"></div> |
|
242 <div class="center"></div> |
|
243 <div class="right"></div> |
|
244 <span>Maximized, Maximizable, Minimizable, Focused</span> |
|
245 </div> |
|
246 |
|
247 <div class="middle"> |
|
248 <div class="left"></div> |
|
249 <span>Content</span> |
|
250 <div class="right"></div> |
|
251 </div> |
|
252 |
|
253 <div class="bottom"> |
|
254 <div class="left"></div> |
|
255 <div class="center"></div> |
|
256 <div class="right"></div> |
|
257 <span>Statusbar text.</span> |
|
258 </div> |
|
259 |
|
260 <a class="move" href="#"></a> |
|
261 <a class="min" href="#"></a> |
|
262 <a class="max" href="#"></a> |
|
263 <a class="med" href="#"></a> |
|
264 <a class="close" href="#"></a> |
|
265 <a class="resize resize-n" href="#"></a> |
|
266 <a class="resize resize-s" href="#"></a> |
|
267 <a class="resize resize-w" href="#"></a> |
|
268 <a class="resize resize-e" href="#"></a> |
|
269 <a class="resize resize-nw" href="#"></a> |
|
270 <a class="resize resize-ne" href="#"></a> |
|
271 <a class="resize resize-sw" href="#"></a> |
|
272 <a class="resize resize-se" href="#"></a> |
|
273 </div> |
|
274 </div> |
|
275 |
|
276 <div class="clearlooks2" style="width:400px; height:100px; left:420px; top:340px;"> |
|
277 <div class="wrapper movable statusbar resizable maximized minimizable maximizable"> |
|
278 <div class="top"> |
|
279 <div class="left"></div> |
|
280 <div class="center"></div> |
|
281 <div class="right"></div> |
|
282 <span>Maximized, Maximizable, Minimizable</span> |
|
283 </div> |
|
284 |
|
285 <div class="middle"> |
|
286 <div class="left"></div> |
|
287 <span>Content</span> |
|
288 <div class="right"></div> |
|
289 </div> |
|
290 |
|
291 <div class="bottom"> |
|
292 <div class="left"></div> |
|
293 <div class="center"></div> |
|
294 <div class="right"></div> |
|
295 <span>Statusbar text.</span> |
|
296 </div> |
|
297 |
|
298 <a class="move" href="#"></a> |
|
299 <a class="min" href="#"></a> |
|
300 <a class="med" href="#"></a> |
|
301 <a class="max" href="#"></a> |
|
302 <a class="close" href="#"></a> |
|
303 <a class="resize resize-n" href="#"></a> |
|
304 <a class="resize resize-s" href="#"></a> |
|
305 <a class="resize resize-w" href="#"></a> |
|
306 <a class="resize resize-e" href="#"></a> |
|
307 <a class="resize resize-nw" href="#"></a> |
|
308 <a class="resize resize-ne" href="#"></a> |
|
309 <a class="resize resize-sw" href="#"></a> |
|
310 <a class="resize resize-se" href="#"></a> |
|
311 </div> |
|
312 </div> |
|
313 |
|
314 <div class="clearlooks2" style="width:400px; height:130px; left:10px; top:450px;"> |
|
315 <div class="wrapper movable focus modal alert"> |
|
316 <div class="top"> |
|
317 <div class="left"></div> |
|
318 <div class="center"></div> |
|
319 <div class="right"></div> |
|
320 <span>Alert</span> |
|
321 </div> |
|
322 |
|
323 <div class="middle"> |
|
324 <div class="left"></div> |
|
325 <span> |
|
326 This is a very long error message. This is a very long error message. |
|
327 This is a very long error message. This is a very long error message. |
|
328 This is a very long error message. This is a very long error message. |
|
329 This is a very long error message. This is a very long error message. |
|
330 This is a very long error message. This is a very long error message. |
|
331 This is a very long error message. This is a very long error message. |
|
332 </span> |
|
333 <div class="right"></div> |
|
334 <div class="icon"></div> |
|
335 </div> |
|
336 |
|
337 <div class="bottom"> |
|
338 <div class="left"></div> |
|
339 <div class="center"></div> |
|
340 <div class="right"></div> |
|
341 </div> |
|
342 |
|
343 <a class="move" href="#"></a> |
|
344 <a class="button ok" href="#">Ok</a> |
|
345 <a class="close" href="#"></a> |
|
346 </div> |
|
347 </div> |
|
348 |
|
349 <div class="clearlooks2" style="width:400px; height:130px; left:420px; top:450px;"> |
|
350 <div class="wrapper movable focus modal confirm"> |
|
351 <div class="top"> |
|
352 <div class="left"></div> |
|
353 <div class="center"></div> |
|
354 <div class="right"></div> |
|
355 <span>Confirm</span> |
|
356 </div> |
|
357 |
|
358 <div class="middle"> |
|
359 <div class="left"></div> |
|
360 <span> |
|
361 This is a very long error message. This is a very long error message. |
|
362 This is a very long error message. This is a very long error message. |
|
363 This is a very long error message. This is a very long error message. |
|
364 This is a very long error message. This is a very long error message. |
|
365 This is a very long error message. This is a very long error message. |
|
366 This is a very long error message. This is a very long error message. |
|
367 </span> |
|
368 <div class="right"></div> |
|
369 <div class="icon"></div> |
|
370 </div> |
|
371 |
|
372 <div class="bottom"> |
|
373 <div class="left"></div> |
|
374 <div class="center"></div> |
|
375 <div class="right"></div> |
|
376 </div> |
|
377 |
|
378 <a class="move" href="#"></a> |
|
379 <a class="button ok" href="#">Ok</a> |
|
380 <a class="button cancel" href="#">Cancel</a> |
|
381 <a class="close" href="#"></a> |
|
382 </div> |
|
383 </div> |
|
384 </div> |
|
385 |
|
386 </body> |
|
387 </html> |