Как сделать несколько модальных окон на одной странице
Добавил пользователь Morpheus Обновлено: 05.10.2024
Привет друзья, в этому году меня несколько раз просили объяснить, как сделать модальное окно на сайте. Кто-то, изучая азы веб-разработки неизбежно приходил к ситуации, когда часть контент необходимо отобразить в модальном окне, кто-то, работая с формами, хочет показать ее не в открытом виде, а в pop-up при клике на кнопку.
Несмотря на то, что на блоге уже были статьи, косвенно связанные с реализацией этого эффекта, вопросы все равно остаются и я решил сделать несколько статей, связанных с этой темой. Сегодня разберемся просто с модальными окнами, а в следующий раз сделаем пульсирующую кнопку в углу экрана, как у сервисов обратного звонка и еще просили урок с анимацией блика на кнопке.
Все это выйдет друг за другом. Конечно, это статьи, ориентированные на новичков, и мастодонтам они будут не очень интересны, но тем, кто использует блог как справочник, возможно, пригодятся эти наработки, чтобы быстро реализовывать тот или иной эффект, не описывая одно и тоже каждый раз в новом проекте и сэкономят немного времени. Приступим.
Чтобы статья получилась максимально полной, будем придерживаться следующего плана и сделаем:
- модальное окно с использованием jQuery.
- Простое модальное окно с использованием чистого js.
Конечно же я покажу как вызывать несколько модальных окно на станице, так как это тоже один из частых вопросов, возникающих у новичков. Разберем возможность закрытия окна при клике вне области контента, решим проблему вертикальной прокрути и другие нюансы, которые возникнут в ходе работы или о которых сообщите вы в комментариях.
Структура проекта для понимания какие файлы и где находятся.
Начнем с разметки. Для создания модального окна я обычно пользуюсь такой структурой.
Где "modal" — это затемненный фон, а "modal__content" - область контента. При этом, когда срабатывает триггер, вызывающий окно, например нажатие кнопки, то к "modal" добавляется класс "modal_active", который дает понять, что модальное окно находится в открытом состоянии. Добавляя или удаляя "modal_active" мы будем открывать или скрывать модальное окно манипулирую стилями.
Большинству читающих нужна будет форма в модальном окне. Можно использовать эту.
Я, для примера, просто выведу текст:
Создал простейшую шапку сайта с кнопкой обратного звонка, которая должна вызвать модальное окно. Классический пример любого лендинга.
Давайте добавим немного стилей и приведем в порядок открытое состояние модалки. Вот, что получилось у меня.
Обратите внимание, что в правом углу контентной области модального окна появилась кнопка с изображением крестика. Файл лежит в папке "img", рядом с папкой "js" и "css".
Тут нас больше всего интересует класс ".modal". Как я и говорил, это само модальное окно с полупрозрачным фоном. Давайте подробнее разберем что там за стили.
Первым делом "вырвем" из потока блок с модальным окном при помощи фиксированного позиционирования. Затем, при помощи свойств "top", "left", "right", "bottom" растянем модальное окно по ширине на весь экран. Z-index - нужен для того, чтобы расположить окно над всеми элементами. Если у кого-то другого элемента значение этого свойства будет выше, то модальное окно не перекроет его.
Далее задаю цвет фона модального окна.
Цвет задаю в RGBA формате. Первые 3 цифры — это цвет, а последняя — прозрачность. Где ".9" — это прозрачность в 90%.
Далее использую flexbox для центрирования элемента "modal__content" внутри "modal", задаю возможность вертикальной прокрутки и внутренние отступы.
Окно прекрасно смотрится, но есть одно "но!". Помните я говорил, что активное состояния модального окна, это когда у нас есть класс "modal_active", а без этого класса, окно закрыто? Сейчас мы доведем до ума эту концепцию. Суть в том, чтобы при "modal" сделать окно скрытым, а при "modal_active" - показать.
Давайте создадим этот класс в стилях и настроим отображение окна только при его наличии.
Для показа/скрытия окна будем пользоваться "visibility", "opacity", "position" и свойство "transition" для плавности анимации появления.
Если еще подробнее, то сначала зададим нулевую прозрачность, а при помощи абсолютного позиционирования и свойства "top" уберем модальное окно за пределы видимости. Дополнительно, для надежности, при помощи свойства "visibility" скроем разметку окна.
В момент, когда появится класс "modal_active" инвертируем "visibility" и "opacity", а также поменять "position" и положение в свойстве "top".
Звучит страшнее, чем кажется, на сам деле все довольно просто.
Теперь в таком состоянии окно скрыто:
А в таком, окно открыто:
Попробуйте добавить вручную и убедиться, что окно успешно появляется.
Пол дела сделали, осталось добавлять этот класс модальному окну при клике по кнопке. Тут подход и разделится. Первый вариант сделаем с использованием jQuery, а второй без него на чистом js.
Но прежде нужно подключить файл скриптов к нашей html страничке. Делается это так:
Вызов модального окна при помощи jQuery
Исходник модального окна с использованием jQuery
Первым делом нужно подключить сам jQuery, перед скриптом, который мы добавили чуть выше. То есть порядок подключения должен быть таким:
Как и условились ранее, вызов окна будет происходить при клике на кнопку в шапке. Давайте обработаем это событие, предварительно объявив в файле "scripts.js", что весь код написанный в нем должен исполняться после загрузки страницы.
Инструменты разработчика можно открыть командой ctrl+shift+i, в некоторых браузерах клавишей f12 или через меню.
Теперь давайте добавим класс "modal_active" нашему модальному окну, а при клике на кнопку с крестиком удалим его.
Попробуйте, смотрится совсем не плохо.
Теперь давайте реализуем функционал, когда модальное окно закрывается при клике, вне области контента этого окна. Делается это довольно просто.
Проверяйте, все должно отлично работать.
Теперь давайте разберем небольшой нюанс. Когда у вас страница наполнится контентом, то неизбежно появится вертикальная прокрутка.
При этом мы сделали так, чтобы если контент не помещается в модальное окно в нем тоже появлялась прокрутка. В таком случае смотрится это не очень красиво и нужно от этого избавляться.
Делается это довольно просто. При вызове окна мы просто уберем у тега "body" возможность прокрути. А когда окно будет закрываться, вернем все все на место.
Можно пойти 2 путями: менять стили прямо в js или создать специальный класс для тега body, который и будем убирать прокрутку. Я, обычно, пользуюсь вторым способом.
Давайте в таблице создадим класс ".hidden" и пропишем ему "overflow", запрещающий прокрутку.
В скрипте, при открытии модального окна, запретим прокрутку у тега "body" путем добавления класса "hidden".
При этом, не забывайте удалять его при закрытии модального окна. В целом все это выглядит так.
Если у вас разные кнопки вызывают разные модальные окна, то привязывайтесь не к классу окна, а к "id", который должен быть уникальным на странице. То есть если у модального окна , то и обращаться к нему можно так:
Если несколько кнопок вызывают одно и тоже окно, то можно перечислить их айди и классы так:
На этом способ реализации открытия модального окна при помощи jQuery можно считать оконченным. Если будут вопросы, то задавайте в комментариях - не стесняйтесь.
Модальное окно html + css, несколько вариантов модальных окон, открытие, закрытие модального окна, открытие модального окна по ссылке, открытие модального окна по кнопке! В общем попытаемся разобраться в скрипте модального окна!
Самое простое модальное окно
Что такое "Модальное окно"
Определение, что такое "Модальное окно"!? "Модальное окно" - это всплывающий элемент, который покрывает все пространство монитора и делает невозможным другие действия на сайте до того, пока вы не закроете это окно!
Алгоритм создания модального окна:
На самом деле, если разобраться, то нам всего то понадобится несколько кнопок и пара div, чтобы это все работало!
Удивительно, что когда сталкиваешься с темой модального окна, то такое ощущение, что люди просто хотят, чтобы вы сошли с ума от того количества кода, которое они используют для вывода и закрытия модального окна!!
Я не претендую на истину в последней инстанции, и вы всегда с помощью поиска всегда сможете найти огромное количество вариантов модальных окон! Но наш принцип максимально просто и минимум кода во всех скриптах - и модальные окна здесь не исключения!
Самое простое модельное окно html + css
Чтобы забрендировать данный скрипт, поскольку я его написал самолично, то он будет называться ->"DW modal window"
Что потребуется для создания модального окна!?
Основной блок модального окна, который по умолчанию будет скрыт (display: none;), как вы наверное уже догадались вниже идущем коде четыре элемента
1). затемнение(zatemnenie),
2). само окно(window)
3). закрытие окна(close_window)
4). Содержание модального окна
И далее нам потребуются стили для нашего модального окна, не буду расписывать каждую строчку -> соберем весь код модального окна вместе:
Скрипт модального окна в сборе -> html + css
Мы недавно ввели новые фишки такие как. : для данного пункта у нас, кроме кода. который расположен ниже
Пример модального окна на отдельной странице
Теперь в этом пункте нашего повествования о модальных окнах соберем наш код модального окна все вместе.
Здесь текст, видео, ссылки, все, что вы захотите!
Живой пример вывода модального окна на экран
После того, как мы сделали все приготовления для реализации модального окна нам нужен живой пример, как же работает данный скрипт модального окна!
Для того, чтобы продемонстрировать вывод модального окна,Ю вам придется нажать по ссылке:
Пример модального окна на отдельной странице
Вызов модального окна по нажатию на кнопку
Это реализуется очень просто:
Результат открытие модального окна по нажатию кнопки
Как сделать вызов нескольких модальных окон на странице!?
Данный скрипт модального окна имеет один недостаток - он будет работать лишь с одним модальным окном!
Если вдруг, вам требуется выводить несколько модальных, разных окон, то вам предстоит модернизировать данный скрипт!
Для этого возьмем эти же стили приведенные выше.
Первый стиль с ид zatemnenie с target полностью удаляем он нам не потребуется
Второй стиль меняем на класс .zatemnenie , его присваиваем нашему второму блоку, который будет скрыт:
В кнопку добавляем ]класс] и id сделаем три кнопки, обращаю ваше внимание, что id должен быть уникальным.
Далее нам потребуется js скрипт, который обработает нажатие на первую кнопку и закрытие при нажатии на кнопку закрыть, соберем все вместе:
Мне нужно несколько загрузочных 3 модальных на одной странице. Я меняю ID для каждого модального блока, и это сработало. Но идентификаторы должны быть уникальными.
Мой путь прав? Если нет, скажите мне лучше.
Я использовал ваш код в bootply и, похоже, работает нормально. Возможно, в вашем коде есть что-то еще,
для начала. Это было сделано для меня в подобных ситуациях.
Это правильный способ размещения нескольких модалов на одной странице. Просто этого не избежать.
Вы бы назвали каждый модал таким же образом, просто изменив data-target чтобы отобразить желаемый модальный дисплей.
Нет другого способа сделать это, а не с Bootstrap, но я уверен, что есть другие варианты для модалов, которые проще, хотя я сомневаюсь, что они будут работать так свободно с Bootstrap.
Если вы используете дополнительный плагин, вы считаете bootbox.js?
Это позволяет вам отображать загрузочные модалы, используя несколько строк javascript, а не громоздкий HTML.
пример, чтобы показать загрузочный модальный запрос пользователю подтвердить некоторые действия:
У меня есть страница, на которой мне нужно щелкнуть по ссылкам справа и слева, и отобразить модальные диалоги. Я вижу на сайте bootstrap, что код для каждого модального диалога составляет не менее 10 строк html. Если у меня есть ссылка 10 на странице, что лучше всего сделать, чтобы иметь код для диалогов 10? Я помещаю все HTML для диалогов в одно и то же .html-страница?
чтобы расширить ответ, который дал Phoenix, inline означает, что вы хотите, чтобы контент загружался при загрузке страницы и был легко доступен. Таким образом, yo поместил бы все 10 модалов на страницу, чтобы при загрузке страницы контент был уже там, а затем вы просто ссылались на каждый модальный отдельно.
таким образом, вы бы поместили 10 кнопок или ссылок, что бы вы ни выбрали, и поместите атрибут data-target в соответствующий модальный следующий:
и тогда вы бы поставили 10 модалов с разными идентификаторами, как показано ниже.
это было бы лучше, если вы хотите, чтобы поисковые системы индексировали содержимое модалов и если вы хотите, чтобы модалы были легко доступны и быстро загружались.
или вы можете просто поместить один модальный на страницу и загрузить весь свой контент удаленно, хотя ajax.
таким образом, ваша ссылка будет выглядеть как
и вы бы просто поместите один из модалов на страницу и загрузите весь свой контент через этот модал. Ваши HTML-фрагменты вы можете назвать как myhtmlsnippet.php и поместите это в атрибуты href и data-remote. Тогда только фрагменты html будут загружены в модальное тело одного модального.
затем вы должны добавить следующий скрипт, чтобы каждый раз, когда модальный закрывается, он очищает содержимое от модального.
это хорошо для таких вещей, как видео и подобные. Если у вас есть 10 различные видео, которые вы хотите загрузить, то это займет слишком много времени для загрузки вашей страницы. Но поисковые системы не будут связывать этот удаленно загруженный контент со страницей, на которой находятся ваши ссылки, они будут искать их по отдельности, и с тех пор это просто фрагменты кода, которые вы захотите использовать роботы.txt, чтобы они не индексировали эти фрагменты.
вы также можете сделать полные html-страницы и просто загрузить один div с этой страницы в свой модальный динамически. Это лучше для SEO и вы не должны исключать содержание с роботами.формат txt. Ниже приведена полная html-страница с рабочим примером. Они, очевидно, не будут работать, если вы не работаете на сервере, поскольку ajax загружается сервером, но вы можете скопировать и вставить их, чтобы увидеть их работу. Также вы захотите реструктурировать модальный, как я сделал ниже, и рестайлировать его, как у меня ниже, в качестве начальной загрузки удаленной загрузки его модальных нагрузок в модальное содержимое. Я также добавил класс clearable-content к модальному контенту и изменен сценарий jquery, поэтому, если у вас есть другие модалы на странице, он не очистит их содержимое только динамически загруженное содержимое. Вот рабочий пример.
тогда вы бы сделали еще одну html-страницу, как показано ниже, я назвал ее 1.html в ссылках выше, но вы можете назвать его что угодно и просто изменить его в своих ссылках на главной странице.
этот метод немного лучше для seo, а затем создание фрагментов, и если поисковая система индексирует ваш сайт они могут индексировать содержание модалов и когда люди ссылаются на него будет полная страница для них, чтобы увидеть. Они по-прежнему не будут связывать содержимое ваших модалов с исходной страницей, но они будут следовать по ссылке и индексировать страницы по отдельности.
надеюсь, это все прояснит для вас.
Это зависит от того, как вы хотите загрузить содержимое ваших диалогов.
Если вы хотите, чтобы они были встроенными, да, вы должны поместить весь html на главную страницу. Поэтому, когда пользователь нажимает на ссылку, содержимое уже есть и может быть немедленно отображено.
Если вы хотите, чтобы они загружались только при нажатии на ссылку, вы можете использовать iframe внутри модального или использовать ajax для загрузки частичного содержимого. проверьте раздел remote в модальной документации.
Спасибо большое, работает!
Только вот текст в окне почему то серый, пришлось в html задавать цвет тексту
ТЕКСТ.
В css модального окна не нашел. если не трудно подскажите где цвет менять в стиле главной странице или в стиле модального окна.?
Андрей Лакиенко Высший разум (117592) Так может стили конфликтуют, задай! important или названия id,class поменяй на другие названия
Читайте также: