Site icon Vavik96

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

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




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>



Пример


X

Cюда можно разместить любой контент


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






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


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

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

Источник

Exit mobile version