Простое модальное окно на CSS без JS

Простое модальное окно для сайта можно сделать используя только HTML и СSS код, без использования скриптов. Ведь большое количество скриптов, естественно, дают нагрузку на сайт и замедляют его работу.

Как вариант, посмотрите это простое модальное окно. Минимум кода, но вполне неплохо. Конечно оно не встанет вровень с модальными окнами jQuery, но все-же.

Смотреть

Скачать

Простое модальное окно на CSS

Подробнее опишу установку простого модального окна.

Вот CSS код, который желательно поместить в таблицу стилей, обычно это style.css

.Window {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.7);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.Window:target {
display: block;
pointer-events: auto;
}
.Window > div {
width: 300px; // меняем размер на нужный
position: relative;
margin: 10% auto;
padding: 20px;
border-radius: 5px;
background: #f2f2f2;
box-shadow: 0px 0px 20px 2px;
}
.close {
background: #cc3300;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #990000; }

Регулируйте ширину модального окна меняя размер по ширине на нужный. В коде это место отмечено.

Ну и HTML код, который ставиться в нужное место. Это по сути ссылка на открытие модали.

<!-- cсылка на модальное окно -->
 <a href="#ModalOpen" title="">текст ссылки</a>
<!-- само модальное окно -->
<div id="ModalOpen" class="Window">
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<p>Cюда можно разместить любой контент</p>
<img src="img/demo.jpg" alt="..." />
</div>
</div>

Помимо ссылки на открытие модального окна, можно поставить кнопку, картинку, еще что-то.

Установка простого модального окна в WordPress

Применение модального окна в WordPress практически ничем не отличается от вышеописанного. Можно добавить, что в него можно добавлять шорткод, например обратной связи плагина CF-7.

Если нужно разместить модаль не в публикации, а в файлах шаблона, то просто поставьте html код в нужное место шаблона.

Леруа мерлен газоблоки цена www.blokprom.ru. Подробное описание чан банный у нас на сайте.

Простое модальное окно на CSS

Установка простого модального окна в WordPress

Похожие по Тегам статьи