Делаем на CSS модальное окно за 3 шага

Делаем на CSS модальное окно за 3 шага

Здравствуйте, дорогие друзья и коллеги!

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

Благодаря великому и могучему CSS3 мы можем создать на чистом css модальное окно, не прибегая к дополнительным скриптам, модулям и плагинам.

Выглядеть такое модальное окно будет вот так:


CSS модальное окно

Посмотреть пример работы и скачать исходники можно по ссылкам ниже.

Прелесть этого способа заключается в том что он подойдёт абсолютно для любого сайта, не зависимо от того работает ли он на какой то CMS или вообще без неё.

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

Шаг 1. Создаём разметку для модального окна

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

Желательно вставить его в начале или в конце страницы.

Здесь вы можете изменить заголовок модального окна и его содержимое.

Шаг 2. Добавляем кнопку для вызова модального окна

Этот код вы выводите в том месте страницы где вам нужно чтобы была эта кнопка.

Якорь #iw-modal служит для открытия блока с указанным идентификатором.
Класс iw-modal-btn используется для задания нужных CSS-свойств.

Например, вы можете использовать такие CSS-свойства:

Я пометила комментариями основные CSS-свойства, которые вы можете изменить для изменения внешнего вида кнопки.

Шаг 3. Добавляем CSS для модального окна

Данные CSS-свойства добавляем в файл стилей нашего сайта в самом конце.

Я пометила комментариями основные CSS-свойства. Вы можете изменить цвета, размеры и отступы чтобы подогнать внешний вид элементов под дизайн своего сайта.

Сохраняем все файлы, в которые вы вносили изменения, обновляем страницу сайта и любуемся своим CSS модальным окном.

Добавление нескольких модальных окон при помощи CSS

  1. 1.Для создания нескольких всплывающих окон на CSS просто копируем код для разметки модального окна и меняем его идентификатор, а так же содержимое:
    Изменяем код модального окна
    Идентификатор должен быть уникальным.
  2. 2.Копируем фрагмент кода, отвечающий за вывод кнопки открытия модального окна и меняем в ней ссылку на идентификатор, который мы указывали для блока со вторым модальным окном.
    Кнопка открытия модального окна

Вот так просто создаются модальные окна на CSS3.

Спасибо что заглянули на мой сайт! Надеюсь что данная статья была для вас полезной!

Буду очень рада видеть ваши комментарии и репосты в соцсетях. Успехов вам!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

2 комментария

  1. //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif
    Спасибо, Юлия //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif
    Нужно будет попробовать. Чем меньше плагинов и их функций на сайте, тем лучше.
    У меня была где-то верстка табов, я даже применял на одном интернет магазине. Там тоже по этому принципу переключаются табы. Если нужно будет, могу выслать.

  2. Кстати, сделал себе мобильное меню на этом примере //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif