Современное модальное окно HTML5 на сайт
 | |
| Сейчас трудно представить сайт без модального окна, так как по своим функциям он очень удобен для любого тематического ресурса. И все больше его используют веб мастера как обратная связь или просто выводят интересующуюся информацию, где также можно установить любой генератор на HTML коде. И после как вы поставите, вы можете освободить к примеру место на главной странице и поместить любой информационный блог. Можно заметить, что некоторые окна выводят на JavaScript, что не очень будет хорошо для самого ресурса, это груз и проблематично станет по своим функциям он работать. Но здесь создан на стилях, что облегчает работу установки и вообще редактирование его, и делается необычной легкостью. Просто все очень понятно, где что написать или установить скрипт в него и все в окне будет отображаться корректно, но для этого нужно правильно выставить. Как можно заметить, что на главном изображение стоит обратная связь и в таком случай можно только поставить один оператор. Но рассмотрим, как можно описание поставить и чтоб красиво и читабельно все было. Приступаем к установке: Для начало поставим сам каркас, где будет хранится информация, что напишем или выставим скрипт на генератор любой. Код <div class="modal"> <input class="modal-open" id="modal-1" type="checkbox" hidden> <div class="modal-wrap" aria-hidden="true" role="dialog"> <label class="modal-overlay" for="modal-1"></label> <div class="modal-dialog"> <div class="modal-header"> <h2>Zornet.ru - сайт о конструкторе uCoz</h2> <label class="btn-close" for="modal-1" aria-hidden="true">×</label> </div> <div class="modal-body"> <p>Здесь ваше описание по любой теме и даже может быть мануал или информация по сайту <br><br> Вторая строка, котороя будет дополнять по форме первую.</p> </div> <div class="modal-footer"> <label class="btn btn-primary" for="modal-1">Это кнопка и надпись в ней</label> </div> </div> </div> </div> В таблицу стилей CSS: Как понимаете, здесь вы можете вывести любую гамму цвета или сделать как вам нужно по дизайн. Код /* Стили модального окна */ .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; } Осталось только кнопка или надпись, которая будет установлено, там где нужно и вызывать окно. Код <label title="Современное модальное окно" class="btn" for="modal-1">Открываем по клику</label> Вот и вся установка: Источник: Webmaster-ucoz.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
