ZorNet.Ru — сайт для вебмастера » HTML и CSS » Всплывающее модальное окно сайта на CSS

Всплывающее модальное окно сайта на CSS

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

Но и дизайн его выполнен красиво, что вы сами можете внести свой коррективы в него, а это цвет или просто убрать закругленные углы. Как поняли, это всплывающего окна на CSS, которое производится по клику. Вы в него можете поставить как описание, или если это кино сайт, то трейлер выставить. Некоторые его ставят в сам материал, здесь просто переключаем на Панель HTML кодов, так как корректно только на этих кодах работает.

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

Здесь видим, что можно написать и поставить изображение, на главной как заметили стоит видеоролик.

Красивое модальное окно на сайт

Переходим к установке:

Это кнопка вызова, в нашем случай просто надпись, где производим клик и появляется окно, по его всем сторонам темно прозрачный фон.

Код
<a href="javascript:void(0)" onclick="this.nextElementSibling.style.display='block';">Вызываем появление окна</a>


Далее идет основа, где как раз будет материал, поставим в низ или вверх сайта.

Код
<div id="parent_popup_click1" class="parent_popup_click">
  <div class="popup_click">
<h2>Всплывающее окно на сайте ZORNET.RU</h2>
  <p><center>
   
<div align="center">Проверяю модальное окно, чтоб потом залить на сайт ZORNET.RU как материал.</div><div align="center"><br></div><div align="center"> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/A6mF2SUHKpk" frameborder="0" allowfullscreen></iframe></div>  
   
  </center>
  <a class="close" title="Закрыть" onclick="document.getElementById('parent_popup_click1').style.display='none';">X</a>
</div>
</div>


Остается CSS:

Код
.parent_popup, .parent_popup_click {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.popup, .popup_click {  
  background: #fff;
  max-width: 600px;
  width:70%;
  margin: 5% auto;
  padding: 5px 20px 13px 20px;
  border: 10px solid #ddd;
  position: relative;
  /*--CSS3 CSS3 Тени для Блока--*/
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
  /*--CSS3 Закругленные углы--*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.popup h2, .popup_click h2 {
  font:28px Monotype Corsiva, Arial;
  font-weight: bold;
  text-align: center;
  color: #008000;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  }
.popup h3, .popup_click h3 {
  font:24px Monotype Corsiva, Arial;  
  color: #008000;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  }
/* кнопка закрытия */
.close {
  background-color: rgba(0, 0, 0, 0.8);
  border: 2px solid #ccc;
  height: 24px;
  line-height: 24px;
  position: absolute;
  right: -24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-family: helvetica, arial;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
  top: -24px;
  width: 24px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background-color: rgba(255, 69, 0, 0.8);
}

PS - проверен на тестовом сайте и работает отлично, главное как уже было сказано, это его простата и корректно отображается.
2017-01-15 Просмотров: 1449 Комментарий: (4)

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

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

Оставь свой отзыв

Комментарий: 4
tsakonter
tsakonter 2017-01-15 18:151
0
Есть еще одно модальное окно, которое открывается при перезагрузки страницы, но там скрипт идет, только не понимаю для чего оно, как реклама. А так это оно распространенное, только сами крестики отключение меняются.
Сафрон
Сафрон 2017-01-15 19:212
0
При чем здесь всплывающее окно при перезагрузки, это ближе к рекламе, здесь же совершенно другая система вызова.
Tergran
Tergran 2017-01-15 19:333
0
Мне больше стандартное с кнопкой как здесь нравится, и понятно все и эффекта не нужно, это так для красоты. А то сделают в самом окне, как то уже не так смотрится, но если только на любой клик можно было закрыть.
FeStemBer
FeStemBer 2017-01-15 21:514
0
Модальное окно нужно на сайте, если ты что то выводишь, все правильно, можно те же новости сайта вывести.
avatar