Создаём всплывающее модальное окно jQuery

1. Создаём простое всплывающее модальное окно
2. Вызов модального окна jQuery по ссылке с CSS
3. Пример модального окна jQuery, вызванного по ссылке (с Демо)

Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.

Создаём простое всплывающее модальное окно

Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появляться


jQuery код

<script type="text/javascript">
$(document).ready(function()
{
alert('Текст во всплывающем окне');
});
</script>

Код вставляете в любое место в body Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:


А вот следующий код будет выполняться после загрузки всей страницы в браузер. В нашем примере после загрузки страницы с изображениями выскочит простое всплывающие окошко:

<script type="text/javascript">
$(window).load(function()
{
alert('Загрузка страницы завершена!)');
});
</script>

Вызов модального окна jQuery по ссылке с CSS

Следующим шагом будет создание модального окна при нажатии по ссылке. Фон при этом будет медленно затемняться.


Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу

Для начала напишем html-часть. Этот код размещаем в body Вашего документа.

<a href="#dialog" name="modal">Вызов модального окна</a>

<!-- Само окно -->
<div id="boxes">  
<div id="dialog" class="window"> Текст модального окна
<div class="top"><a href="#" class="link close"/>Закрыть</a></div>
<div class="content">Текст в модальном окне.</div>
</div>
</div>

<!-- Маска, затемняющая фон -->
<div id="mask"></div>

Код CSS. Либо в отдельном css-файле, либо в <style> в head.

<style>
    body {
    font-family:verdana;
    font-size:15px;
    }  
    .link {color:#fff; text-decoration:none}
    .link:hover {color:#fff; text-decoration:underline}  
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    }
#boxes .window {
    position:absolute;
    left:0;
    top:0px;
    -top: 40px;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding: 20px;
    overflow: hidden;
    }  
#boxes #dialog {
    width:375px; 
    height:203px;
    padding:10px;
    background-color:#ffffff;
    }  
.top {
    position:absolute;
    left:0;
    top:0;
    width:370px;
    height:30px;
    background: #0085cc;
    padding: 8px 20px 6px 10px;
    }
.close {
    float:right;
    }
.content {
    padding-top: 35px;
}
</style>

В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.

Внимание! Не забываем подключить библиотеку в head документа!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.

Код jQuery

<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>

Теперь можете посмотреть на работу скрипта!

Демонстрация Скачать исходники
Спасибо за внимание! Удачи в начинаниях!