Создание простого модального окна

В этой статье я покажу, как сделать всплывающее окно с контентом. Такое всплывающее окно называется модальным.

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

Например «Купить в один клик» или «Заказать обратный звонок».

Также в модальное окно помещают контент, на котором владелец сайта хочет акцентировать внимание, к примеру купон со скидкой.

Итак, скачайте плагин jquery.arcticmodal-0.3.zip

Скопируем содержимое архива в структуру сайта

Подключим на страницу jQuery из CDN Google, сам js скрипт и стили CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/include/jquery.arcticmodal-0.3/jquery.arcticmodal-0.3.min.js"></script>
<link rel="stylesheet" type="text/css"
	  href="/include/jquery.arcticmodal-0.3/jquery.arcticmodal-0.3.css"/>
<link rel="stylesheet" type="text/css"
	  href="/include/jquery.arcticmodal-0.3/themes/dark.css"/>

Разместим на странице 2 ссылки. Модальных окна будет два, чтобы показать отсутствие ограничения на количество окон, а также отсутствие конфликтов между ними.

<a href="#" class="modal_1">Ссылка на первое модальное окно</a><br />
<a href="#" class="modal_2">Ссылка на второе модальное окно</a>

Затем добавляем на страницу сами всплывающие окна и контент, отображаемый в них.

Первое окно, это пример формы, а второе — пример флаера

    <div style="display: none;">
        <div class="box-modal" id="exampleModal_1">
            <div class="box-modal_close arcticmodal-close">закрыть</div>
            Заказать обратный звонок<br />
           <input value="Имя"/><br />
           <input value="Телефон"/><br />
           <input type="submit" value="Заказать"/>
        </div>
    </div>
   
    <div style="display: none;">
        <div class="box-modal content" id="exampleModal_2">
            <img src= "/include/jquery.arcticmodal-0.3/adv.jpg"/>
        </div>
    </div>

Далее размещаем на странице скрипт, который будет показывать модальные окна при клике на ссылку

<script>
        $(".modal_1").click(function (e) {
            e.preventDefault();
            $('#exampleModal_1').arcticmodal();
        });
    </script>

    <script>
        $(".modal_2").click(function (e) {
            e.preventDefault();
            $('#exampleModal_2').arcticmodal();
        });
    </script>

На этом все! Теперь у нас на странице есть два разных модальных окна.

Скачать плагин Arctic Modal jquery.arcticmodal-0.3.zip