Всплывающее модальное окно на чистом CSS

Сайт OnWordpress.ru продается

Оптимальная цена 300 000 рублей

Подробнее
Модальное окно на CSS для сайта

Модальные окна очень часто используются вебмастерами на сайтах, потому что очень удобны, и помогают пользователю сконцентрировать все внимание на нужном контенте. Обычно для использования модального окна на 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.

Остались вопросы?

Если у вас остались вопросы или есть чем дополнить - выражайтесь в комментариях.

Расскажите друзьям
Нравится блог? - Читайте ВКонтакте
Ответим на Ваши вопросы в комментариях