Многие вебмастера задаются вопросом: как сделать всплывающее окно с затемнением на CSS?
Оказывается создать не ограниченное количество всплывающих окон на одной странице, без использования javascript, очень легко. Для этого сделайте следующее:
1. Вставьте CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.pop {padding: 50px; text-align: center;} .pop a {display: inline-block; margin: 20px; padding: 5px 15px; border: 1px solid #ccc; color: #777; text-decoration: none; } .pop a:hover { color: white; border: 1px solid #00ade2; background: #00ade2;} .overlay {top: 0;right: 0;bottom: 0;left: 0;z-index: 10;display: none; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.65);position: fixed; /* фиксированное поцизионирование */cursor: default; /* тип курсара */} /* активируем слой затемнения */ .overlay:target {display: block;} /* стили модального окна */ .popup {top: -100%;right: 0;left: 50%;font-size: 14px;z-index: 20;margin: 0;width: 85%;min-width: 220px;max-width: 300px; /* фиксированное позиционирование, окно стабильно при прокрутке */ position: fixed;padding: 15px;border: 1px solid #383838;background: #fefefe; /* скругление углов */ -webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;border-radius: 4px; /* внешняя тень */ -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;} /* активируем модальный блок */ .overlay:target+.popup {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);top: 20%;} /* формируем кнопку закрытия */ .close {top: 10px;right: 10px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;} .close:hover {color: #2d9c85; text-decoration: none; } |
2. Вставьте HTML код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="pop"> <a href="#win1" class="button button-green">Окно 1</a> <a href="#win2" class="button button-red">Окно 2</a> <a href="#win3" class="button button-red">Окно 3</a> </div> <a href="#x" class="overlay" id="win1"></a> <div class="popup"> Окно 1 <a class="close" title="Закрыть" href="#close">Х</a> </div> <a href="#x" class="overlay" id="win2"></a> <div class="popup"> Окно 2 <a class="close" title="Закрыть" href="#close">Х</a> </div> <a href="#x" class="overlay" id="win3"></a> <div class="popup"> Окно 3 <a class="close" title="Закрыть" href="#close">Х</a> </div> |
Да модуль хороший, но с прокрутками беда(