Дата и время публикации : 29 Марта 17 в 20:11 | Раздел : Прочее для uCoz
| Параметр | Значение |
|---|---|
| Дата публик. | 29 Марта 17, Среда, 20:11 |
| Адапт. дизайн | |
| Обновления | Не производились |
| Просмотрен | 1261 |
Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.
Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.
HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.
1. В таблицу стилей вставляем код:
/* Стили модального окна */
.modal-header h2 {
color: #555;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
}
/* кнопка закрытия окна */
.modal .btn-close {
color: #aaa;
cursor: pointer;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.modal .btn-close:hover {
color: red;
}
/* слой затемнения */
.modal-wrap:before {
content: "";
display: none;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 101;
}
.modal-overlay {
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 102;
}
/* активация слоя затемнения и модального блока */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}
/* элементы модального окна */
.modal-dialog {
background: #fefefe;
border: none;
border-radius: 3px;
position: fixed;
width: 80%;
max-width: 500px;
left: 50%;
top: -100%;
-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);
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.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
z-index: 103;
}
.modal-body {
padding: 20px;
}
.modal-body p {
margin: 0;
}
.modal-header,
.modal-footer {
padding: 20px 20px;
}
.modal-header {
border-bottom: #eaeaea solid 1px;
}
.modal-header h2 {
font-size: 20px;
margin: 0;
}
.modal-footer {
border-top: #eaeaea solid 1px;
text-align: right;
}
/* адаптивные картинки в модальном блоке */
.modal-body img {
max-width: 100%;
height: auto;
}
/* кнопки */
.btn {
background: #fff;
border: #555 solid 1px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
}
.btn:hover, .btn:focus {
background: #f2f2f2;
}
.btn-primary {
background: #428bca;
border-color: #357ebd;
color: #fff;
}
.btn-primary:hover{
background: #66A1D3;
}
2. HTML код окна вставляем в нижнюю часть сайта перед </body>:
3. Ну и на конец кнопку вызова окна:
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияАдаптивный, или если хотите, отзывчивый веб-дизайн сейчас не просто очередной дизайнерский тренд, это уже некий стандарт разработки сайтов, обеспеч...
