Процесс создания модальных окон на jQuery
В связи возрастающим интересом пользователей к jQuery, хочу продемонстрировать создания модальных окон для вашего сайта с эффектом затухания, сделать это не так уж и сложно. Как Вы уже, наверное, давно поняли — с помощью jQuery возможно сделать почти все, что угодно.
И так, готовый результат, для ленивых, можно скачать или просмотреть:
1. jQuery
Начнем с jQuery и вставим следующий код между тегами <head></head>, выглядеть она будет так:
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 |
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script> $(document).ready(function() { $('a[name=modal]').click(function(e) { e.preventDefault(); var id = $(this).attr('href'); var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); $(id).fadeIn(2000); }); $('.window .close').click(function (e) { e.preventDefault(); $('#mask, .window').hide(); }); $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); </script> |
Как обычно, вначале подключаем фреймворк и далее идет функция.
2. CSS
Вторым этапом создание будет CSS стили. Как Вы видели в демо версии, Вашему вниманию представлены три варианта применения данной функции. Ниже представлены стили оформления для всех 3-х вариантов:
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 |
<style> body { font-family:verdana; font-size:15px; } a {color:#333; text-decoration:none} a:hover {color:#ccc; text-decoration:none} #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } #boxes .window { position:absolute; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; } #boxes #dialog { width:375px; height:203px; padding:10px; background-color:#ffffff; } #boxes #dialog1 { width:375px; height:203px; } #dialog1 .d-header { background:url(images/login-header.png) no-repeat 0 0 transparent; width:375px; height:150px; } #dialog1 .d-header input { position:relative; top:60px; left:100px; border:3px solid #cccccc; height:22px; width:200px; font-size:15px; padding:5px; margin-top:4px; } #dialog1 .d-blank { float:left; background:url(images/login-blank.png) no-repeat 0 0 transparent; width:267px; height:53px; } #dialog1 .d-login { float:left; width:108px; height:53px; } #boxes #dialog2 { background:url(images/notice.png) no-repeat 0 0 transparent; width:326px; height:229px; padding:50px 0 20px 25px; } </style> |
Стили можно поместить как в отдельный файл, так и в сам документ. В стилях есть несколько путей к картинкам. Помните, если картинки будут переноситься в другую папку, необходимо поменять к ним путь.
3. HTML
Завершающим этапом сегодняшнего урока станет HTML код, который нужно поместить после тега <body>.
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 |
<ul> <li><a href="#dialog" name="modal">Простое окно</a></li> <li><a href="#dialog1" name="modal">Форма для логина</a></li> <li><a href="#dialog2" name="modal">Красивый стикер</a></li> </ul> <div id="boxes"> <div id="dialog"> Простое модальное окно | <a href="#"class="close"/>Закрыть его</a> </div> <!-- НАчало формы логина --> <div id="dialog1"> <div> <input type="text" value="username" onclick="this.value=''"/><br/> <input type="password" value="Password" onclick="this.value=''"/> </div> <div></div> <div><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div> </div> <!-- конец --> <!-- Начало красивого стикера --> <div id="dialog2"> <b>Rudebox.org.ua</b> - все для веб-дизайнера<br/><br/> <input type="button" value="Согласен!"/> </div> <!-- конец --> <!-- Макска, которая затемняет весь экран --> <div id="mask"></div> |
Вот на этом и все, надеюсь урок был вам интересен.
Читайте также:
Опубликовал Cooper 19.06.2011 в 06:31, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |