Модальные окна очень часто используются вебмастерами на сайтах, потому что очень удобны, и помогают пользователю сконцентрировать все внимание на нужном контенте. Обычно для использования модального окна на WordPress сайте устанавливаются такие плагины как Fancybox, Lightbox и другие подобные. Но бывают случаи, когда необходимо отказаться от jQuery и добавить модальное окно на сайт с помощью CSS.
Модальное окно на CSS
Этот способ очень хорош в определенных ситуациях, и позволяет использовать всплывающее окно на сайте без подключения дополнительных скриптов. Чтобы добавить модальное окно на сайт выполните несколько шагов по следующей инструкции.
1. Скачайте CSS файл стилей
Для начала вам необходимо скачать CSS файл с необходимыми стилями по ссылке ниже.
Скачать файл стилей
2. Подключите файл стилей в header.php
Загрузите скачанную папку в корневой каталог вашего сайта. Затем подключите этот файл, добавив следующую строку в файле header.php:
<link rel="stylesheet" type="text/css" href="/modal/style.css" />
3. Добавьте кнопку для вызова модального окна
Затем в нужное место на сайте нужно добавить кнопку для вызова модального окна. Кнопкой является стандартная ссылка, обязательно с классом openModal. Код кнопки будет примерно следующим:
<a href="#modal" class="button openModal">Открыть модальное окно</a>
4. Добавьте содержимое модального окна
После этого добавьте блок с содержимым модального окна. Содержимое может быть абсолютно любым:
<div id="modal" class="modal"> <div> <div class="text">Любое содержимое модального окна</div> <a href="#close" title="Закрыть">Закрыть</a> </div> </div>
DIV блок с содержимым модального окна можно разместить в файле single.php или в footer.php.
Остались вопросы?
Если у вас остались вопросы или есть чем дополнить - выражайтесь в комментариях.
