Что такое всплывающее окно и как его создать самостоятельно. Как сделать всплывающее окно?

Спасибо, что прочитали статью! Если материал был полезен для вас — пожалуйста, поставьте лайк или напишите об этом в комментариях, это займет 1 минуту, это важно для меня. Спасибо!

Модальные окна на javascript. 30 строк кода

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

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

Весь код находится в конце статьи.

Открытое окно 1 Открытое окно 2
Заголовок окна 1
Заголовок окна 2

/* стиль для наложения */ .overlay/* Стиль для модального окна */ .modal/* Стиль для кнопки закрытия */ .modal__cross/* стиль для кнопок. Мы приличные программисты, нехорошо оставлять простые ссылки */ a

Вот результат (это скриншот, пожалуйста, не кликайте :)):

Рабочий проект сценария:

1. Зарегистрировать событие клика на элементы с классом js-open-modal
2. При клике на кнопку, ищем модальное окно с таким же атрибутом data-modal, добавляем класс .active подложке и этому модальному окну
3. При клике на крестик удаляем класс у родительского модального окна и подложки

Пишем JavaScript

Сначала мы помещаем событие DOMContentLoaded в документ. Это событие запускается при загрузке страницы.

document.addEventListener('DOMContentLoaded', function()<>);

Далее мы записываем таблицу кнопок в переменную с помощью метода querySelector. Здесь мы также определяем еще 2 переменные: опорный элемент и кросс-таблицу.

document.addEventListener('DOMContentLoaded', function());

Обратите внимание, что мы получаем кнопки modalButton и CloseButton через querySelectorAll, который возвращает таблицу. Мы сделали это потому, что нам нужно обработать все нажатия на кнопки, но мы получаем наложение через querySelector, который возвращает один элемент.

В html мы добавляем классы к кнопкам. js-open-modal. Мы намеренно будем использовать новый класс с префиксом js, чтобы избежать путаницы между стилями и интерактивностью. Любой, кто работает с кодом, увидит, что этот класс имеет префикс js. Это означает, что данный класс используется для интерактивности и его лучше не трогать.

Открытое окно 1 Открытое окно 2

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

/* обход таблицы кнопок */ modalButtons.forEach(function(item).<>);

В переменной item хранится текущий элемент цикла. Подключите к нему оператора:

/* обход таблицы кнопок */ modalButtons.forEach(function(item).);>);

Event или e — текущий элемент события. Этот объект хранит различные методы и данные. Когда вызывается событие, аргумент функции ссылается на этот объект. Зачем нам нужен этот объект? Подробнее об этом ниже.

Что нам нужно сделать сейчас?

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

Для этого в объекте события есть метод, который блокирует действие элемента по умолчанию.

event.preventDefault(),

Проблема профилактики решена.

Каждая кнопка имеет атрибут data-modal и хранит значение, которое имеет модальное окно, в том же атрибуте. Наша процедура:

1. Получить значение атрибута текущей кнопки
2. Найти модальное окно с помощью этого значения

var modalId = this.getAttribute('data-modal'), modalElem = document.querySelector('.modaldata-modal="' + modalId + '''),

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

В результате мы имеем селектор ‘ .modal=data-modal=’variable-value», который находит наше модальное окно.

Дополнение

По просьбе одного из читателей я добавляю код для закрытия модального окна при нажатии клавиши ESC и темном фоне.

Окно закроется, когда вы нажмете ESC:

document.body.addEventListener('keyup', function (e);>, false),

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

События Keyup имеют свойство keycode, которое хранит код нажатой клавиши. Для ESC этот код равен 27.

Все, что нам нужно сделать, это сравнить каждый раз нажатие клавиши с кодом ESC, и если есть совпадение, мы удалим класс из активного окна и фона.

Скрытие при нажатии

Теперь вы должны знать, как сделать это самостоятельно. Не читайте дальше и не пытайтесь написать этот код самостоятельно. Я сделаю несколько отступов, чтобы вам не пришлось искать.

Ладно, смотри уже 🙂

overlay.addEventListener('click', function());

Мы создаем событие щелчка на оверлее, эта переменная создается в самом начале. Затем в функции мы удаляем класс active из активного модального окна и делаем то же самое для фона click, переменная this отвечает за при переводе — this.

То есть, когда вы нажимаете на фон, мы говорим: «Удалите активный класс из окна и нажмите на фон».

А такая ли гадина эти ваши всплывающие окна?

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

Они служат для предоставления информации и диалога между пользователем и программой (веб-приложением). К сожалению, многие пользователи негативно относятся к всплывающим окнам, и совершенно справедливо, поскольку в Интернете они используются в основном в рекламных целях.

Существует два типа всплывающих окон:

• Открывающиеся на переднем плане ( pop-up ) – всплывают поверх основного;
• Открывающиеся на заднем плане ( pop-under ) – открываются за основным окном.

Последние являются самыми коварными. Они становятся активными и видимыми для пользователя только после закрытия главного окна. Наиболее распространенными являются те, которые появляются только при открытии после закрытия последнего, поэтому невозможно определить их источник и вовремя заблокировать.

Средства борьбы

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

Самой важной программой для работы в Интернете является браузер. Поэтому основной метод блокировки всплывающей рекламы — в браузере:

• Internet Explorer – стал последним из всех программных продуктов, в котором была реализована возможность блокировки всплывающей рекламы. Это было сделано лишь в 2004 году;
• Opera – этот продукт стал первым браузером в мире со встроенной функцией блокировки всплывающих окон. Всплывающие окна в Опере можно блокировать, начиная с 2000 года;
• Mozilla Firefox – этот браузер усовершенствовал подход к борьбе с рекламой, который был реализован в Opera. В отличие от него в Мозиле блокируются не вся всплывающая реклама, а лишь та, которая загружается при открытии основного окна.

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

Создание всплывающих окон с помощью javascript

Создается функция f1, в теле которой вызывается метод window. В его теле реализован метод open(). Затем этот метод вызывается с параметром, указывающим адрес страницы, которая должна быть открыта в созданном окне. Затем вызывается метод setTimeout(). В качестве параметров ей передаются функция f1 и временной интервал, через который будет открыто новое окно.

• Метод alert() – выводит на экран обычное текстовое сообщение. Чтобы скрыть диалог после прочтения, нужно нажать на кнопку « Ok » внизу окна;
• Метод confirm() – подобен предыдущему методу. Но выводимый им диалог кроме « Ok » снабжен еще и кнопкой « Cancel ». С их помощью пользователь может принять или отказаться от условия, указанного в окне;
• Метод prompt() – служит для вызова еще одной разновидности всплывающего окна javascript. В отличие от упомянутых выше это окно снабжено еще и текстовым полем. В него пользователь может вводить текстовые данные, которые можно присвоить значению нужной переменной.

Если у вас есть WordPress и вы ищете решение в виде готового, простого плагина, то оно есть. Это дополнение называется WP Tactical Popup и предлагает множество настроек. Например, вы можете указать количество страниц, к которым обращается пользователь, после чего появляется всплывающее окно, или установить таймер, по истечении которого появляется всплывающее окно. Также можно настроить интервал отображения для человека так, чтобы он не был слишком назойливым. В целом, я считаю, что это очень хорошее стандартное решение.

В модальное окно можно вставить HTML-код, изображение или регистрационную форму.

Bootstrap поддерживает плагин modal.js от Jquery. Если вы используете этот фреймворк в своем макете, лучше всего создать с его помощью красивое всплывающее окно. Для начала работы вам необходимо: загрузить и связать Bootstrap, загрузить и связать jQuery.

Разместите необходимый код на нужной странице, а затем напишите небольшой веб-скрипт. Подробное описание этого метода с примером можно найти на сайте //bootstrap-ru.com. Это, вероятно, лучший способ.

• url – это адрес страницы, которая откроется в новом окне;
• Name – имя созданного окна. Может быть использовано для дальнейшей обработки в формах (параметр target );
• Params – строка параметров для нового окна. Их полный список можно узнать самостоятельно из документации по javascript.

Итак, мы рассмотрели три способа создания всплывающего окна, и если вы хотите лучше понять javascript, я рекомендую вам ознакомиться с нашим курсом по этому языку и его самой известной библиотеке — jQuery.

JavaScript: Быстрый старт.

Вариант для тех, у кого WordPress

Изучите основы JavaScript на практическом примере создания веб-приложения.

Вариант 3 – на фреймворке Bootstrap