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

Темное модальное окно на HTML и CSS

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

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

Здесь вот смотрим пример работы его, где фон становится вокруг его под один оттенок.

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

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

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

Код

<a href="#win2" tabindex="0">
  <span style="color:#red;">Открыть окно</span> </a>

  <div class="dm-overlay" id="win2">
  <div class="dm-table">
  <div class="dm-cell">
  <div class="dm-modal white">
  <a href="#cllose" class="cllose"></a>
  <h3>ZORNET.RU</h3>
  <div class="pl-left">
  <img src="http://zornet.ru/ZORNET/drental/OohSq3Z.png">
  </div>

<p>Здесь заголовок</p>
<ul><li>Скачать скрипты и шаблоны на сайте ZORNET.RU</li></ul>
<ul><li>Задать вопрос по конструктору uCoz</li></ul>
<ul><li>Скачать кнопки для форума на ZORNET.RU</li></ul>
<ul><li>Можете также скопировать код на это модальное окно</li></ul><br>
<ul><li>На сайте ZORNET.RU вы найдете скрипты на разную тематику и по различным функциям, также найти материал, чтоб создать свой оригинальный сайт</li></ul>
<ul><li>Связь по телефону <i class="fa fa-phone fa-2x" aria-hidden="true"></i> <b>+7854654233</b></li></ul>
  </div>
  </div>
  </div>
  </div>

В CSS:

Код

.dm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  overflow: auto;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.dm-overlay:target {
  display: block;
  -webkit-animation: fade .6s;
  -moz-animation: fade .6s;
  animation: fade .6s;
}

.dm-table {
  display: table;
  width: 100%;
  height: 100%;
}

.dm-cell {
  display: table-cell;
  padding: 0 1em;
  vertical-align: middle;
  text-align: center;
}

.dm-modal {
  display: inline-block;
  padding: 20px;
  max-width: 50em;
  background: #3c4346;
  -webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
  color: #cfd8dc;
  text-align: left;
}

.dm-modal img {
  width: 100%;
  height: auto;
}

.pl-left,
.pl-right {
  width: 25%;
  height: auto;
}

.pl-right {
  float: right;
  margin: 5px 0 5px 15px;
}

.pl-left {
  float: left;
  margin: 5px 15px 5px 0;
}

.video {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
  height: 0;
}
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cllose {
  z-index: 9999;
  float: right;
  width: 30px;
  height: 30px;
  color: #cfd8dc;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
  cursor: pointer;
}
.cllose:after {
  display: block;
  border: 2px solid #cfd8dc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: 'X';
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85);
  -ms-transform: scale(0.85);
  transform: scale(0.85);
}

.cllose:hover:after {
  border-color: #fff;
  color: #fff;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.greeen {
  background: #388e3c!important;
}
.cyan {
  background: #0097a7!important;
}
.teal {
  background: #00796b!important;
}

@-moz-keyframes fade {
  from {
  opacity: 0;
  }
  to {
  opacity: 1
  }
}
@-webkit-keyframes fade {
  from {
  opacity: 0;
  }
  to {
  opacity: 1
  }
}
@keyframes fade {
  from {
  opacity: 0;
  }
  to {
  opacity: 1
  }
}

  .menu_n {
  float:left;
  display:block;
  position:relative;
  padding: 2px 4px;
  }

  .menu_n .drop{
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#fff; text-shadow:1px 1px 1px #fff;
  outline:0;
  }

  .menu_n:hover .drop{
  color:#2784b4;
  }

  .dd_ugol1,
  .dd_menu {
  width:394px;
  }

  .dd_menu {
  float:left;
  position:absolute;
  margin:0px auto;
  background:#4c4c4c;
  padding:5px;
  left:-999em;
  z-index:998;
  border:1px solid #111;
  -moz-border-radius:5px 5px 5px ;
  -webkit-border-radius:5px 5px 5px ;
  border-radius:5px 5px 5px ;
  box-shadow: 0px 0px 5px #111;
  }

  .menu_n:hover .dd_menu{
  left:auto;
  right:0px;
  bottom:30px;
  }

  .dd_ugol1 {
  height:25px;
  float:left;
  position:absolute;
  bottom: -25px;
  right: 10px;
  background:url(fon_ugol_1.png) no-repeat;
  background-position: right top;
  }

  .dd_menu_os {
  overflow:hidden;
  width:370px;
  border: 1px solid #353535;
  margin:0;
  padding:10px;
  }
.pContainer_Button_infoo {
  width: 184.7px;
  height: 22px;
  /* line-height: 20px; */
  text-align: center;
  background: url() center;
  border-radius: 6px;
  /* display: inline-block; */
  color: #fff;
  font-size: 12px;
}

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

За материал большое спасибо пользователю VIP36RUS, что предоставил его на сайт и сделал демонстрацию на его.

17 Августа 2017 Просмотров: 2827 Комментариев: (3)

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

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

Kosten

Комментарии: 3
Порядок вывода комментариев: Kosten 17 Августа 2017 02:09¹ 0 Если кто хочет посмотреть как работает и вообще как визуально после установки смотрится модальное окна. То на форуме пользователь VIP36RUS разместил материал и демонстрацию прикрепил к нему. Critic© 17 Августа 2017 18:20² 0 Вот это окошко красиво смотрится на светлом сайте, на темном оно будет просто с шаблон дизайн сливаться и плюс в нем. что сделано на CSS, и не каких скриптов не нужно. Это вот забираю, думаю оно мне пригодиться. Kosten 17 Августа 2017 18:40³ 0 Здесь полностью согласен, что на темном его как сейчас идет не нужно ставить. Так как на таком дизайн проверял работоспособность. Но здесь же идет по всем сторонам фон и на темном сайте его можно сделать светлым и это окно при открытие не будет сливаться с дизайн и все отлично и корректно смотреться будет, все нужно под каждый ресурс настраивать, если не идет по стилистике.