» »

Всплывающее модальное окно сайта на 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 Просмотров: 1032 Комментарий: (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