|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
5 <title>jQuery custom scrollbar demo</title> |
|
6 <!-- stylesheet for demo and examples --> |
|
7 |
|
8 <style type="text/css"> |
|
9 |
|
10 .forme{ |
|
11 width:160px; |
|
12 height:200px; |
|
13 overflow:auto; |
|
14 background:#ccc; |
|
15 } |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 /* Modal */ |
|
22 #basic-modal-content, |
|
23 #basic-modal-content2, |
|
24 #basic-modal-content3 { |
|
25 display:none; |
|
26 } |
|
27 |
|
28 #basic-modal-content3 { |
|
29 padding:30px; |
|
30 } |
|
31 |
|
32 #simplemodal-overlay { |
|
33 background-color:#000; |
|
34 cursor:default; |
|
35 } |
|
36 |
|
37 #simplemodal-container { |
|
38 height:450px; |
|
39 width:695px; |
|
40 color:#fff; |
|
41 border:10px solid rgba(204, 204, 204, .3); |
|
42 -webkit-border-radius: 15px; |
|
43 border-radius: 15px; |
|
44 } |
|
45 |
|
46 #basic-modal-content2 #simplemodal-container { |
|
47 height:300px; |
|
48 width:695px; |
|
49 color:#fff; |
|
50 border:10px solid rgba(204, 204, 204, .3); |
|
51 -webkit-border-radius: 15px; |
|
52 border-radius: 15px; |
|
53 } |
|
54 |
|
55 #basic-modal-content2 .whyNot { |
|
56 -webkit-border-radius: 15px; |
|
57 border-radius: 15px; |
|
58 background:#2d2d2d; |
|
59 float:left; |
|
60 margin:20px 0 0 18px; |
|
61 padding:20px 10px; |
|
62 width: 27%; |
|
63 } |
|
64 |
|
65 #simplemodal-container p { |
|
66 padding-left:10px; |
|
67 background:url(skin/border_modal.png) repeat-x left bottom; |
|
68 padding-bottom:10px; |
|
69 } |
|
70 |
|
71 |
|
72 #simplemodal-container #basic-modal-content3 p { |
|
73 padding-left:0; |
|
74 background:none; |
|
75 } |
|
76 |
|
77 #simplemodal-container p.interest { |
|
78 padding-left:10px; |
|
79 background:none; |
|
80 padding-bottom:15px; |
|
81 margin:0 |
|
82 } |
|
83 |
|
84 #simplemodal-container .alphabet { |
|
85 padding-left:10px; |
|
86 margin:10px 0; |
|
87 overflow:hidden; |
|
88 } |
|
89 |
|
90 #simplemodal-container .alphabet li { |
|
91 float:left; |
|
92 } |
|
93 |
|
94 #simplemodal-container .alphabet li a { |
|
95 font-weight:bold; |
|
96 text-decoration:none; |
|
97 padding:3px 7px; |
|
98 font-size:17px; |
|
99 line-height:26px; |
|
100 } |
|
101 |
|
102 #simplemodal-container .alphabet li a:hover, #simplemodal-container .alphabet li a.selected { |
|
103 background:#555; |
|
104 -webkit-border-radius: 20px; |
|
105 border-radius: 20px; |
|
106 } |
|
107 |
|
108 #simplemodal-container .star_names { |
|
109 height:330px; |
|
110 overflow:auto; |
|
111 clear:both; |
|
112 } |
|
113 |
|
114 #simplemodal-container .star_names li { |
|
115 margin:0 0 20px 9px; |
|
116 /*display:inline-block;*/ |
|
117 /*width: 30%;*/ |
|
118 width:217px; |
|
119 float:left; |
|
120 } |
|
121 |
|
122 #simplemodal-container .star_names li a { |
|
123 text-decoration:none; |
|
124 display:table; |
|
125 height:60px; |
|
126 width:207px; |
|
127 padding:10px 5px; |
|
128 font-size:14px; |
|
129 } |
|
130 |
|
131 #simplemodal-container .star_names li a em { |
|
132 display:table-cell; |
|
133 vertical-align:middle; |
|
134 padding-left:10px; |
|
135 } |
|
136 |
|
137 #simplemodal-container .star_names li a:hover, #simplemodal-container .star_names li a.selected { |
|
138 background:#2d2d2d; |
|
139 -webkit-border-radius: 10px; |
|
140 border-radius: 10px; |
|
141 } |
|
142 |
|
143 #simplemodal-container .star_names li a .item_disk_medium { |
|
144 /*float:left;*/ |
|
145 display:table-cell; |
|
146 } |
|
147 |
|
148 #simplemodal-container .star_names li a strong, #basic-modal-content2 .whyNot a > span { |
|
149 display:block; |
|
150 /*margin-top: 10px;*/ |
|
151 white-space:normal |
|
152 } |
|
153 |
|
154 #simplemodal-container .star_names li a strong { |
|
155 font-weight:bold; |
|
156 } |
|
157 |
|
158 |
|
159 #basic-modal-content2 .whyNot strong { |
|
160 display:block; |
|
161 margin-top: 0px |
|
162 } |
|
163 |
|
164 #basic-modal-content2 .whyNot a { |
|
165 text-decoration:none |
|
166 } |
|
167 |
|
168 #simplemodal-container code { |
|
169 background:#141414; |
|
170 border-left:3px solid #65B43D; |
|
171 color:#bbb; |
|
172 display:block; |
|
173 font-size:12px; |
|
174 margin-bottom:12px; |
|
175 padding:4px 6px 6px; |
|
176 } |
|
177 |
|
178 #simplemodal-container a { |
|
179 color:#ddd; |
|
180 } |
|
181 |
|
182 #simplemodal-container a.modalCloseImg { |
|
183 background:url(skin/x.png) no-repeat; |
|
184 width:32px; |
|
185 height:32px; |
|
186 display:inline; |
|
187 z-index:3200; |
|
188 position:absolute; |
|
189 top:-15px; |
|
190 right:-16px; |
|
191 cursor:pointer; |
|
192 } |
|
193 |
|
194 #simplemodal-container h3 { |
|
195 color:#fff; |
|
196 margin: 0 0 10px 0; |
|
197 background:#131313; |
|
198 padding:10px; |
|
199 font-weight:bold; |
|
200 font-size:18px; |
|
201 } |
|
202 |
|
203 #simplemodal-container .interest { |
|
204 margin:0 0 0 0; |
|
205 background:none; |
|
206 } |
|
207 |
|
208 .simplemodal-wrap { |
|
209 background-color:#202020; |
|
210 overflow:hidden !important |
|
211 } |
|
212 |
|
213 /* / Modal */ |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 </style> |
|
219 |
|
220 <!-- Custom scrollbars CSS --> |
|
221 <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> |
|
222 </head> |
|
223 <body> |
|
224 |
|
225 |
|
226 |
|
227 <div id="contenu_body" class="forme"> |
|
228 KLOUG |
|
229 <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p> |
|
230 <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p> |
|
231 <p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p> |
|
232 <p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p> |
|
233 <p>Etiam sed massa felis, aliquam pellentesque est.</p> |
|
234 <p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p> |
|
235 <p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p> |
|
236 <p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p> |
|
237 <p>the end.</p> |
|
238 </div> |
|
239 |
|
240 <a href="#" class="simple_modal_trigger">Affiche une modale simple</a> |
|
241 <div id="simple_modal" class="forme"> |
|
242 MODALE SIMPLE |
|
243 <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p> |
|
244 <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p> |
|
245 <p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p> |
|
246 <p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p> |
|
247 <p>Etiam sed massa felis, aliquam pellentesque est.</p> |
|
248 <p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p> |
|
249 <p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p> |
|
250 <p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p> |
|
251 <p>the end.</p> |
|
252 </div> |
|
253 |
|
254 |
|
255 <a href="#" id="show_modal" class="">On affiche la modale avec scroll</a> |
|
256 <div id="modal_content" class="forme" style="display:none;"> |
|
257 <h3>Stars selection</h3> |
|
258 <p>Select the name of a star to add it to your filters</p> |
|
259 <ul class="alphabet"> |
|
260 <li><a href="#">A</a></li> |
|
261 <li><a href="#" class="selected">B</a></li> |
|
262 <li><a href="#">C</a></li> |
|
263 <li><a href="#">D</a></li> |
|
264 <li><a href="#">E</a></li> |
|
265 <li><a href="#">F</a></li> |
|
266 <li><a href="#">G</a></li> |
|
267 <li><a href="#">H</a></li> |
|
268 <li><a href="#">I</a></li> |
|
269 <li><a href="#">J</a></li> |
|
270 <li><a href="#">K</a></li> |
|
271 <li><a href="#">L</a></li> |
|
272 <li><a href="#">M</a></li> |
|
273 <li><a href="#">N</a></li> |
|
274 <li><a href="#">O</a></li> |
|
275 <li><a href="#">P</a></li> |
|
276 <li><a href="#">Q</a></li> |
|
277 <li><a href="#">R</a></li> |
|
278 <li><a href="#">S</a></li> |
|
279 <li><a href="#">T</a></li> |
|
280 <li><a href="#">U</a></li> |
|
281 <li><a href="#">V</a></li> |
|
282 <li><a href="#">W</a></li> |
|
283 <li><a href="#">X</a></li> |
|
284 <li><a href="#">Y</a></li> |
|
285 <li><a href="#">Z</a></li> |
|
286 </ul> |
|
287 <div id="star_names"> |
|
288 <ul> |
|
289 <li> |
|
290 <a href="#"> |
|
291 <span class="item_disk_medium"> |
|
292 <img alt="" src="img/visu_star_01.jpg"> |
|
293 </span> |
|
294 <em> |
|
295 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
296 </em> |
|
297 </a> |
|
298 </li> |
|
299 <li> |
|
300 <a href="#" class="selected"> |
|
301 <span class="item_disk_medium"> |
|
302 <img alt="" src="img/visu_star_01.jpg"> |
|
303 </span> |
|
304 <em> |
|
305 <strong>Brigitte Bardot avec un nom long</strong><span>3 movies</span> |
|
306 </em> |
|
307 </a> |
|
308 </li> |
|
309 <li> |
|
310 <a href="#"> |
|
311 <span class="item_disk_medium"> |
|
312 <img alt="" src="img/visu_star_01.jpg"> |
|
313 </span> |
|
314 <em> |
|
315 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
316 </em> |
|
317 </a> |
|
318 </li> |
|
319 <li> |
|
320 <a href="#"> |
|
321 <span class="item_disk_medium"> |
|
322 <img alt="" src="img/visu_star_01.jpg"> |
|
323 </span> |
|
324 <em> |
|
325 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
326 </em> |
|
327 </a> |
|
328 </li> |
|
329 <li> |
|
330 <a href="#"> |
|
331 <span class="item_disk_medium"> |
|
332 <img alt="" src="img/visu_star_01.jpg"> |
|
333 </span> |
|
334 <em> |
|
335 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
336 </em> |
|
337 </a> |
|
338 </li> |
|
339 <li> |
|
340 <a href="#"> |
|
341 <span class="item_disk_medium"> |
|
342 <img alt="" src="img/visu_star_01.jpg"> |
|
343 </span> |
|
344 <em> |
|
345 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
346 </em> |
|
347 </a> |
|
348 </li> |
|
349 <li> |
|
350 <a href="#"> |
|
351 <span class="item_disk_medium"> |
|
352 <img alt="" src="img/visu_star_01.jpg"> |
|
353 </span> |
|
354 <em> |
|
355 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
356 </em> |
|
357 </a> |
|
358 </li> |
|
359 <li> |
|
360 <a href="#"> |
|
361 <span class="item_disk_medium"> |
|
362 <img alt="" src="img/visu_star_01.jpg"> |
|
363 </span> |
|
364 <em> |
|
365 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
366 </em> |
|
367 </a> |
|
368 </li> |
|
369 <li> |
|
370 <a href="#"> |
|
371 <span class="item_disk_medium"> |
|
372 <img alt="" src="img/visu_star_01.jpg"> |
|
373 </span> |
|
374 <em> |
|
375 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
376 </em> |
|
377 </a> |
|
378 </li> |
|
379 <li> |
|
380 <a href="#"> |
|
381 <span class="item_disk_medium"> |
|
382 <img alt="" src="img/visu_star_01.jpg"> |
|
383 </span> |
|
384 <em> |
|
385 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
386 </em> |
|
387 </a> |
|
388 </li> |
|
389 |
|
390 <li> |
|
391 <a href="#"> |
|
392 <span class="item_disk_medium"> |
|
393 <img alt="" src="img/visu_star_01.jpg"> |
|
394 </span> |
|
395 <em> |
|
396 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
397 </em> |
|
398 </a> |
|
399 </li> |
|
400 <li> |
|
401 <a href="#"> |
|
402 <span class="item_disk_medium"> |
|
403 <img alt="" src="img/visu_star_01.jpg"> |
|
404 </span> |
|
405 <em> |
|
406 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
407 </em> |
|
408 </a> |
|
409 </li> |
|
410 <li> |
|
411 <a href="#"> |
|
412 <span class="item_disk_medium"> |
|
413 <img alt="" src="img/visu_star_01.jpg"> |
|
414 </span> |
|
415 <em> |
|
416 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
417 </em> |
|
418 </a> |
|
419 </li> |
|
420 <li> |
|
421 <a href="#"> |
|
422 <span class="item_disk_medium"> |
|
423 <img alt="" src="img/visu_star_01.jpg"> |
|
424 </span> |
|
425 <em> |
|
426 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
427 </em> |
|
428 </a> |
|
429 </li> |
|
430 <li> |
|
431 <a href="#"> |
|
432 <span class="item_disk_medium"> |
|
433 <img alt="" src="img/visu_star_01.jpg"> |
|
434 </span> |
|
435 <em> |
|
436 <strong>Brigitte Bardot</strong><span>3 movies</span> |
|
437 </em> |
|
438 </a> |
|
439 </li> |
|
440 </ul> |
|
441 </div> |
|
442 </div> |
|
443 |
|
444 |
|
445 |
|
446 <!-- Get Google CDN's jQuery and jQuery UI with fallback to local --> |
|
447 <script src="js/libs/jquery-1.7.1.min.js"></script> |
|
448 <script src="js/libs/jquery-ui-1.8.21.custom.min.js"></script> |
|
449 |
|
450 <!--<script src="js/script.js"></script>--> |
|
451 <script type='text/javascript' src='js/jquery.simplemodal.js'></script> |
|
452 |
|
453 |
|
454 <!-- mousewheel plugin --> |
|
455 <script src="js/jquery.mousewheel.min.js"></script> |
|
456 <!-- custom scrollbars plugin --> |
|
457 <script src="js/jquery.mCustomScrollbar.js"></script> |
|
458 <script type="text/javascript"> |
|
459 $(function() { |
|
460 $("#contenu_body").mCustomScrollbar({ |
|
461 scrollButtons:{ |
|
462 enable:true |
|
463 } |
|
464 }); |
|
465 |
|
466 $('.simple_modal_trigger').click(function (e) { |
|
467 $('#simple_modal').modal({ |
|
468 containerCss:{ |
|
469 height:320, |
|
470 width:690 |
|
471 }, |
|
472 overlayClose: true |
|
473 }); |
|
474 return false; |
|
475 }); |
|
476 |
|
477 $('#show_modal').click(function() { |
|
478 $("#modal_content").modal({ |
|
479 containerCss:{ |
|
480 height:220, |
|
481 width:490 |
|
482 }, |
|
483 overlayClose: true, |
|
484 onShow : function() { |
|
485 $("#star_names"). |
|
486 mCustomScrollbar({ |
|
487 scrollButtons:{ |
|
488 enable:false |
|
489 } |
|
490 }); |
|
491 } |
|
492 }); |
|
493 return false; |
|
494 }); |
|
495 |
|
496 }); |
|
497 |
|
498 (function(){ |
|
499 })(); |
|
500 |
|
501 $(function() { |
|
502 }); |
|
503 |
|
504 </script> |
|
505 |
|
506 </body> |
|
507 </html> |