» »

Современное модальное окно HTML5 на сайт

Современное модальное окно 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
16.02.2017 Просмотров: 806 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
Сопрано
Сопрано 16.02.2017 22:071
0
Вообще модальные окна на стилях очень нужны на сайте, что по JavaScript не приходилось встречать, но там согласен, лучше стили поставить.
tsakonter
tsakonter 16.02.2017 22:132
0
Здесь есть генератор ключей, его тоже можно в модальное окно вывести.
Kosten
Kosten 16.02.2017 22:263
0
Можно и генератор ключей поставить, но он в поиске по запросу, так что его в материал установил. Но есть де много генераторов, как теги, или что то другое, где заходишь на сайт и написано, только клик сделал и все появилось и не чего искать не нужно, но главное место не занимает и страницу под него не нужно делать.
Kosten
Kosten 16.02.2017 22:314
0
Забыл в материале прописать демонстрацию этого модального окна, так что переходим по этой ссылке и смотрим как работать и появляться будет.



Ссылка: webmaster-ucoz.ru/ucoz/demo/material/demo2.html
Tergran
Tergran 16.02.2017 22:365
0
С начало подумал, что у него такой не красивый обвод темный идет, а все оказалось стандатно, даже теней нет.
csretven
csretven 19.02.2017 00:066
0
Почему это модальное окно на HTML5, хотя вижу, от других оно не отличается.
Kosten
Kosten 19.02.2017 00:217
0
Что по всем сторонам идет темный обвод, его не будет, просто сделано, чтоб можно было видеть.
avatar