» »

Светлое модальное окно CSS3 для сайта


Светлое модальное окно CSS3 для сайта

Решил найти простое модальное окно, чтоб не сильно по настройкам было и в тоже время вписывалось по своему дизайн. И вот здесь попалось с кнопкой, так как основном его вызывают по надписи, здесь будет совершенно по другому. Сейчас на сайте как атрибут функций модальное окно стало стандартным явлением. Его используют в разной плоскости, это вывод описание или видео. Если такой вызов вас не устроит, то вы просто в стилях его можете заменить.

Модальное окно на HTML5, CSS3

Поставил на тестовый сайт и проверил, не стал видео ставить, а просто написал и установил изображение. И оно у меня спустилось в низ, думал что так и должно, но нем, все в CSSбыстро настраиваться. Просто по запросу запросил "Простое модальное окно" так что если что то не будет по центру, все можете выставить, но как пример по умолчанию было 500 пикселей по ширине, сделал 700, так как по фото слишком узко показалось и в тоже время проверил как все делается.

Установка:

Давайте для начало скрип вызова поставим.

Код
<label title="Стандартное модальное окно" class="btn" for="modal-1">Я кнопка</label>


Потом идем в низ сайта и устанавливаем каркас, это там где вы будите писать или что то свое устанавливать. Специально сделал отступы, что сам поставил, что заметите.

Код
<label class="btn" for="modal-1">Открыть</label>
<!-- Модальное окно -->
<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</h2>
  <label class="btn-close" for="modal-1" aria-hidden="true">×</label>
  </div>
  <div class="modal-body">
  <p>
   
  <div style="text-align: center;">Судя по комментариям, тема создания модальных окон довольно популярна. Я не раз уже описывал различные техники исполнения, как с помощью jQuery, так и на чистом CSS. Да и в интернета, информации по теме предостаточно, и каждый может выбрать для себя оптимальный вариант.</div><div style="text-align: center;"><br></div><div style="text-align: center;"> 
<img border="0" align="absmiddle" src="http://i.imgur.com/0H1YLGb.jpg"></div>
   
  </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: 10%;
}
/* элементы модального окна */
.modal-dialog {
  background: #fefefe;
  border: none;
  border-radius: 5px;
  position: fixed;
  width: 80%;
  max-width: 700px;
  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: 10px 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;
}


В стилях все написано, что за что отвечает, и думаю вам будет так намного удобнее настроить на своем сайте, так как оно не идет по умолчанию, и нужно выставлять как вам удобнее.

Источник: http://dbmast.ru/
23.03.2016 Просмотров: 516 Комментарий: (5)

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

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

Комментарий: 5
Scheme
Scheme 23.03.2016 06:011
0
Есть модальные окна, которые также идут со стилями, а это уменьшение самого изображение, чтоб написать вокруг него, но и что то в этом плане. Так вот, в этом нет, просто видео не знаю не ставил, придется тоже настраивать, как и скрипт, который в нем будет.
Kosten
Kosten 23.03.2016 06:082
0
Есть такое и приходилось ставить, так проверить, идет на его 2 стиля, это основной и второй, как раз по желанию, чтоб уменьшить саму картинку и сделать описание. Но все же нужно в CSSставить, а оно не резиновое, вот что подумал, специально для окна сделать файл, как делать здесь написано, и потом ставить, чтоб не занимало место.
Сафрон
Сафрон 23.03.2016 06:163
0
Что то модальные окна стали популярны, на одном сайта виде, но просто появляется, а из мелких обломках собирается. И как понимаю, ты проверяешь на тестовом сайте и там не куплено не одного пакета и значит оно работать будет. Но пока не могу представить, куда можно его поставить, жа и вообще оно для сайта, если есть свое.
Ходя есть плюс, на стандартных уже стоят коды от самой системы, а здесь самому можно выставить, но мне больше понравилось это окно, так поставил посмотреть. Просто даже не думал, что установлю с первого раза.
Tergran
Tergran 23.03.2016 06:214
0
Кто мне скажет, а для чего там вторая кнопка выхода, это чтоб не забыть, или просто стандартный если не увидит.
Kosten
Kosten 23.03.2016 06:275
0
Но зачем встало то, можно просто убрать кнопку, так как она идет в скрипте, к ста те кнопка вызова здесь как писал, в стилях отведен css под нее, чтоб не искать, возможно киту то просто надпись нужна, так как кнопка простая светлая, темной можно сделать, но дополнительный стиль не увидел, чтоб сами знаки менялись.
avatar