Как сделать всплывающее модальное окно, пример
Модальное окно html + css, несколько вариантов модальных окон, открытие, закрытие модального окна, открытие модального окна по ссылке, открытие модального окна по кнопке! В общем попытаемся разобраться в скрипте модального окна!
Список модальных окон
- Что такое "Модальное окно"
- Самое простое модальное окно ->
html + css - Скрипт модального окна в сборе ->
html + css - Вызов модального окна по нажатию на кнопку
- Как сделать вызов нескольких модальных окон на странице!?
- Как сделать модальное окно с формой
- Модальное окно php функция
Что такое "Модальное окно"
Определение, что такое "Модальное окно"!? "Модальное окно" - это всплывающий элемент, который покрывает все пространство монитора и делает невозможным другие действия на сайте до того, пока вы не закроете это окно!
Алгоритм создания модального окна:
На самом деле, если разобраться, то нам всего то понадобится несколько кнопок и пара div, чтобы это все работало!
Удивительно, что когда сталкиваешься с темой модального окна, то такое ощущение, что люди просто хотят, чтобы вы сошли с ума от того количества кода, которое они используют для вывода и закрытия модального окна!!
Я не претендую на истину в последней инстанции, и вы всегда с помощью поиска всегда сможете найти огромное количество вариантов модальных окон! Но наш принцип максимально просто и минимум кода во всех скриптах - и модальные окна здесь не исключения!
Самое простое модальное окно html + css
Чтобы забрендировать данный скрипт, поскольку я его написал самолично, то он будет называться ->"DW modal window".
Что потребуется для создания модального окна!?
Нам потребуется объект/элемент/блок/div по которому мы будем нажимать, чтобы вызвать модальное окно, в данном случае это будет ссылка, в ссылке атрибута [href] поместим часть ссылки
<a href="#modal_window">Самое простое модальное окно</a>
Основной блок модального окна, который по умолчанию будет скрыт (display: none;), как вы наверное уже догадались вниже идущем коде четыре элемента.
Затемнение(modal_window).
Само окно(window).
Закрытие окна(close_window).
Содержание модального окна.
<div id="modal_window">
<window>
<a href="#close_window" class="close_window">X</a>
Здесь текст, видео, ссылки, все, что вы захотите!
</window>
</div>
И далее нам потребуются стили для нашего модального окна, не буду расписывать каждую строчку -> соберем весь код модального окна вместе:
Скрипт модального окна в сборе -> html + css
Скрипт модального окна работает по уже выше описанному принципу...
Пример модального окна добавляем/удаляем якорь
Пример модального окна на отдельной странице
Скачать скрипт модального окна добавляем/удаляем якорь
-Что в архиве?
В архиве вот этот пример.
Где скачать скрипт модального окна добавляем/удаляем якорь
Вызов модального окна по нажатию на кнопку
Но, что если нам требуется открыть данное модальное окно по нажатию на кнопку, а не по ссылке!
Повторим предыдущий скрипт "модального окна", но открывать будем с помощью кнопки button.
Скачать скрипт модального окна добавляем/удаляем якорь
-Что в архиве?
В архиве вот этот пример.
Где скачать скрипт модального окна добавляем/удаляем якорь
Как сделать вызов нескольких модальных окон на странице!?
Выше приведенные скрипты модального окна имеют один недостаток - они будут работать лишь с одним модальным окном!
Если вдруг, вам требуется выводить несколько модальных окон, то вам предстоит модернизировать данный скрипт!
Для этого возьмем эти же стили приведенные выше...
Первый стиль с ид
#modal_window:target
Второй стиль меняем на класс
<div class="modal_window"><window> <a class="close_window">🞨</a>Первое окно</window></div>
В кнопку добавляем класс и id сделаем три кнопки, обращаю ваше внимание, что id должен быть уникальным!!!:
<button id="idbutton" class="show_next_1">button</button>
Далее нам потребуется js скрипт, который обработает нажатие на первую кнопку и закрытие при нажатии на кнопку закрыть, соберем все вместе:
Примеры использования нескольких модальных окон на странице!
Пример модального окна на отдельной странице.
Еще один пример, поставим код прямо сюда, на страницу, чтобы проверить работоспособность наших модальных окон! Смотри ниже:
🞨Первое окно
🞨Второе окно
🞨Третье окно
Скачать скрипт нескольких модальных окон на странице!
- Что в архиве?
В архиве вот этот пример.
Где скачать скрипт нескольких модальных окон на странице!
Скачать скрипт модального окна на странице со всеми скриптами .
Как сделать модальное окно с формой?
Для того, чтобы сделать модальное окно с формой, нужно слова "Здесь текст, видео, ссылки, все, что вы захотите!" заменить на форму.
Возьмем выше приведенный скрипт "модального окна" и добавим туда форму с input.
И получим вот такой пример "модального окна с формой".
Скачать скрипт модального окна с формой!
- Что в архиве?
В архиве вот этот пример.
Где скачать скрипт модального окна с формой!
Скачать скрипт модального окна на странице со всеми скриптами .
Модальное окно php функция
Если вы читаете данную строку - то значит до описания чуть-чуть не хватило времени.
Примерно, что было описано в предыдущем пункте включая:
getElementById отправляем style="display:block";
getElementById отправляем style="display:none";
И все будет запаковано в функцию php.
Если вы используете и любите php также как я, то несомненно зацените её!
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
