Создаём адаптивное модальное окно jquery

DEMO

В статье о создание модального окна на css мы разобрали что такое модальное окно и зачем оно нужно. А так же создали окно используя только css. В этой статье я опишу как создать модальное окно javascript. А конкретнее мы будем для создания использовать библиотеку jquery.

И так начнём создавать модальное окно на jquery. Для усложнения задачи поставим такое условие. Нам нужно будет создать адаптивное модальное окно. А адаптивность будет заключаться в том, что окно при уменьшении размера экрана то же будет уменьшаться. Адаптивное модальное окно jquery начнём создавать с html разметки.

        <div class="wraper">
            <div class="boxbutt">
                   <div class="button" id="gowindow">Жми здесь!</div>
            </div>
            <div id="modal_window">
                         <span id="window_close">X</span>
                         <h2>Заказать звонок</h2>
            </div>
            <div id="myoverlay"></div>
        </div>
    

С кодом я думаю всё понятно. Имеем оболочку .wraper, где находится контент нашего сайта. Есть кнопка вызова модального окна с идентификаторм gowindow, само окно с ид modal_window и перекрывающий слой myoverlay. Напишем теперь css стили.

    .wraper {
        width: 100%;
        margin: auto;
        width: auto;/*то же что и 100%*/
        max-width: 960px;/*максимальная ширина обёртки*/
        border: 1px solid #000;
        background-color: #F5F9FB;    
    }
    .button{
        /*-------*/
    }
    #modal_window {
        width: 34%;/*для адаптивности*/
        height: 300px; 
        border-radius: 10px;
        border: 3px #fff solid;
        background: #e0e0e0;
        margin-top: -30%;
        margin-left: 33%;
        display: none;
        opacity: 0; /*полная прозрачность для анимации */
        z-index: 5000; /*окно должно быть верхним слоем*/
        padding-top: 20px; 
        text-align: center; 
        position: relative;
    }
    #modal_window #window_close {
        width: 21px;
        height: 21px;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        display: block;
    }
    #myoverlay {
        z-index: 3000; /*выше всех слоёв но ниже окна */
        position: fixed; /*для перекрытия сайта*/
        background-color: #000;
        opacity: 0.5; 
        width: 100%; 
        height: 100%; /*полностью на экран */
        top: 0; 
        left: 0;
        cursor: pointer;
        display: none;
    }
    

Опишем css код. Блок .wraper задаём адаптивным, он меняется от размера экрана но не более 960px. Код кнопки показывать не буду. Ширину окна #modal_window задаём в процентах, ширина будет зависеть от ширины .wraper. Для центровки окна задаём марджин 33%. Он расчитывается так 50%-17%, где 17% половина ширины окна. Скрываем окно свойствами display: none и opacity: 0. С кодом #window_close и #myoverlay я думаю всё ясно. Давайте теперь напишем код для jquery. Будем считать что jqery уже подключена.

$(document).ready(function() {
    $('#gowindow').click( function(){//клик по кнопке
         $('#myoverlay').fadeIn(400, //показываем перекрывающий слой
             function(){
                 $('#modal_window') 
                     .css('display', 'block') //делаем окно видимым
                     .animate({opacity: 1, top: '50%'}, 200); //увеличиваем прозрачность, окно плавно съезжает
         });
     });
     /* убираем окно */
     $('#window_close, #myoverlay').click( function(){ //нажатие по перекрывающему слою или кресту
         $('#modal_window')
             .animate({opacity: 0, top: '45%'}, 200,  //вкл прозрачность, окно идёт вверх
                 function(){
                     $(this).css('display', 'none'); //делаем окно невидимым
                     $('#myoverlay').fadeOut(400); //убираем слой перекрытие
                 }
             );
     });
});

Js код я думаю в объяснении не нуждается, так как я его достаточно хорошо прокомментировал. На этом я думаю всё, так что подведём итоги. Мы сделали простое адаптивное модальное окно jquery