Простое модальное окно на 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>
Пример
Помимо ссылки на открытие модального окна, можно поставить кнопку, картинку, еще что-то.
Установка простого модального окна в WordPress
Применение модального окна в WordPress практически ничем не отличается от вышеописанного. Можно добавить, что в него можно добавлять шорткод, например обратной связи плагина CF-7.
Если нужно разместить модаль не в публикации, а в файлах шаблона, то просто поставьте html код в нужное место шаблона.
