Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Как сделать всплывающее модальное окно

Поддержи проект!!! smile

Модальное окно html + css, несколько вариантов модальных окон, открытие, закрытие модального окна, открытие модального окна по ссылке, открытие модального окна по кнопке! В общем попытаемся разобраться в скрипте модального окна!
На все три варианта, модальных окон сделаны примеры с архивами!

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

  1. Что такое "Модальное окно"
  2. Самое простое модельное окно -> html + css
  3. Скрипт модального окна в сборе -> html + css
    1. Пример на отдельной странице
    2. Скачать в архиве
  4. Живой пример вывода модального окна на экран
  5. Вызов модального окна по нажатию на кнопку
    1. Пример на отдельной странице
    2. Скачать в архиве
  6. Как сделать вызов нескольких модальных окон на странице!?
    1. Пример на отдельной странице
    2. Скачать в архиве
  7. Как сделать модальное окно с формой

  1. Что такое "Модальное окно"

    Определение, что такое "Модальное окно"!? "Модальное окно" - это всплывающий элемент, который покрывает все пространство монитора и делает невозможным другие действия на сайте до того, пока вы не закроете это окно!

    Алгоритм создания модального окна:

    На самом деле, если разобраться, то нам всего то понадобится несколько кнопок и пара div, чтобы это все работало!

    Удивительно, что когда сталкиваешься с темой модального окна, то такое ощущение, что люди просто хотят, чтобы вы сошли с ума от того количества кода, которое они используют для вывода и закрытия модального окна!!
    Я не претендую на истину в последней инстанции, и вы всегда с помощью поиска всегда сможете найти огромное количество вариантов модальных окон! Но наш принцип максимально просто и минимум кода во всех скриптах - и модальные окна здесь не исключения!


  2. Самое простое модельное окно html + css

    Чтобы забрендировать данный скрипт, поскольку я его написал самолично, то он будет называться ->"DW modal window"

    Что потребуется для создания модального окна!?

    Нам потребуется объект/элемент/блок/div по которому мы будем нажимать, чтобы вызвать модальное окно, в данном случае это будет ссылка, в ссылке атрибута [href] поместим часть ссылки target -> #:

    <a href="#zatemnenie">Самое простое модальное окно</a>

    Основной блок модального окна, который по умолчанию будет скрыт (display: none;), как вы наверное уже догадались вниже идущем коде четыре элемента

    1). затемнение(zatemnenie),
    2). само окно(window)
    3). закрытие окна(close_window)
    4). Содержание модального окна
    <div id="zatemnenie">
       <window>
           <a href="#close_window" class="close_window">X</a>
           Здесь текст, видео, ссылки, все, что вы захотите!
       </window>
    </div>

    И далее нам потребуются стили для нашего модального окна, не буду расписывать каждую строчку -> соберем весь код модального окна вместе:


  3. Скрипт модального окна в сборе -> html + css

    Мы недавно ввели новые фишки такие как... : для данного пункта у нас, кроме кода. который расположен ниже

    Пример модального окна на отдельной странице

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

    Теперь в этом пункте нашего повествования о модальных окнах соберем наш код модального окна все вместе...:

    <style>

    #zatemnenie:target {

    display: block;

    }

    #zatemnenie {

    background: rgba(102, 102, 102, 0.68);

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    display: none;

    z-index: 9999999999;

    }

    window {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 400px;

    border: 1px solid #cecece;

    padding: 50px;

    transform: translate(-50%,-50%);

    background-color: #fafafa;

    }

    div#main_text a.close_window {

    position: absolute;

    right: 10px;

    top: 4px;

    border: none;

    }

    </style>

    <a href="#zatemnenie">Самое простое модальное окно</a>

    <div id="zatemnenie">

       <window>

           <a href="#close_window" class="close_window">X</a>

           Здесь текст, видео, ссылки, все, что вы захотите!

       </window>

    </div>


  4. Живой пример вывода модального окна на экран

    После того, как мы сделали все приготовления для реализации модального окна нам нужен живой пример, как же работает данный скрипт модального окна!

    Для того, чтобы продемонстрировать вывод модального окна,Ю вам придется нажать по ссылке:

    Самое простое модальное окно
    XЗдесь текст, видео, ссылки, все, что вы захотите!


  5. Пример модального окна на отдельной странице

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

    Вызов модального окна по нажатию на кнопку

    Но, что если нам требуется открыть данное модальное окно оп нажатию на кнопку, а не по ссылке!

    Это реализуется очень просто:

    <button onclick="location.hash ='zatemnenie'">button</button>

    Результат открытие модального окна по нажатию кнопки


  6. Как сделать вызов нескольких модальных окон на странице!?

    Данный скрипт модального окна имеет один недостаток - он будет работать лишь с одним модальным окном!

    Если вдруг, вам требуется выводить несколько модальных, разных окон, то вам предстоит модернизировать данный скрипт!

    Для этого возьмем эти же стили приведенные выше...

    Первый стиль с ид zatemnenie с target полностью удаляем он нам не потребуется

    #zatemnenie:target

    Второй стиль меняем на класс .zatemnenie, его присваиваем нашему второму блоку, который будет скрыт:

    <div class="zatemnenie"><window> <a class="close_window">X</a>Первое окно</window></div>

    В кнопку добавляем ]класс] и id сделаем три кнопки, обращаю ваше внимание, что id должен быть уникальным!!!:

    <button id="idbutton" class="show_next_1">button</button>

    Далее нам потребуется js скрипт, который обработает нажатие на первую кнопку и закрытие при нажатии на кнопку закрыть, соберем все вместе:

    <style>

    .zatemnenie {

    background: rgba(102, 102, 102, 0.68);

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    display: none;

    z-index: 9999999999;

    }

    window {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 400px;

    border: 1px solid #cecece;

    padding: 50px;

    transform: translate(-50%,-50%);

    background-color: #fafafa;

    }

    div#main_text a.close_window {

    position: absolute;

    right: 10px;

    top: 4px;

    border: none;

    }

    </style>


    <button id="idbutton" class="show_next_1">button</button>

    <div class="zatemnenie"><window> <a class="close_window">X</a>Первое окно</window></div>


    <button id="idbutton1" class="show_next_1">button</button>

    <div class="zatemnenie"><window> <a class="close_window">X</a>Второе окно</window></div>


    <button id="idbutton2" class="show_next_1">button</button>

    <div class="zatemnenie"><window> <a class="close_window">X</a>Третье окно</window></div>


    <script>

    var close_next;

    document.addEventListener("click", function(is_close) {

    if (is_close.target.className =="show_next_1")

    {

    close_next = is_close.target.id;

    document.getElementById(close_next).nextElementSibling.style="display:block";

    }

    if (is_close.target.className =="close_window")

    {

    document.getElementById(close_next).nextElementSibling.style="display:none";

    }

    });

    </script>

    Пример сразу нескольких модальных окон на странице!

    Пример модального окна на отдельной странице

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

    Далее нам остается собрать весь код вместе и поставить на страницу, чтобы проверить работоспособность наших модальных окон! на одной странице!

    XПервое окно
    XВторое окно
    XТретье окно


  7. Как сделать модальное окно с формой?

    Для того, чтобы сделать модальное окно с формой, нужно слова "Здесь текст, видео, ссылки, все, что вы захотите!" заменить на форму.

    Вот накидал по быстрому :

    X

    style

    Кроме выше приведенных, добавляем туда :

    <style>

    window input {

    display: block;

    width: 100%;

    padding: 10px 0;

    text-indent: 20px;

    margin: 10px 0;

    }

    </style>

    Html

    <button id="idbutton5" class="show_next_1">button</button>

    <div class="zatemnenie"><window> <a class="close_window">X</a>

    <form method="post">

    <input name="name" type="" placeholder="Имя">

    <input name="email" type="" placeholder="Почта">

    <input name="submit" type="submit" value ="Отправить">

    </form>

    </window></div>

    javascript

    <script> var close_next;

    document.addEventListener("click", function(is_close) {

    if (is_close.target.className =="show_next_1")

    {

    close_next = is_close.target.id;

    document.getElementById(close_next).nextElementSibling.style="display:block";

    }

    if (is_close.target.className =="close_window")

    {

    document.getElementById(close_next).nextElementSibling.style="display:none";

    }

    });</script>


Последняя дата редактирования : 23.07.2021 11:00
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Комментариев : 2 COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

21/07/2021 02:47 александр анатольевич таширев ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
прикольно
Ответить
23/07/2021 10:58 Марат александр анатольевич таширев ... Пожаловаться Скопировать ссылку
🞨
По умолчанию, текст при блокировке:
Комментарий заблокирован администратором сайта
Для изменения текста блокировки введите новый текст ниже:
Заблокировать
Сам офигеваю...wall
Ответить
Теги:
модальное окно html css модальное окно url всплывающее модальное окно html кнопка закрытия модального окна html html как сделать модальное окно html модальное окно форма открытие модального окна html html открыть модальное окно html картинки в модальное окно код модального окна html форма обратной связи html в модальном окне всплывающее модальное окно при наведении html открытие картинки в модальном окне html html модальное окно по центру простое модальное окно html изображение в модальном окне html модальное окно html при нажатии на кнопку создание модального окна в html открыть картинку в модальном окне html что такое #modal html модальное окно скрипт html выпадающее окно html popup window простое всплывающее окно html

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.
александр анатольевич таширев :
21/07/2021 02:47
прикольно
подробнее.
Марат :
17/07/2021 04:14
Рад, что помог! Приходите ещё!
подробнее.
Slomal Plintus :
16/07/2021 06:41
спасибо за ответ, очень помогло!
подробнее.
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.

текст_ссылки