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

Модальное окно на HTML и CSS для сайта

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

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

Устанавливается, там где нужно по вашему мнению:

Код

<div id="zornet_ru">
  <div id="vebmastak">
<div align="center"><img border="0" align="absmiddle" src="http://zornet.ru/ZORNET/drental/OohSq3Z.png"></div>
Sony PlayStation VR добилась тихих успехов, и к июню 2017 года объем продаж превысил миллион. Конечно это мало чем по сравнению с 62,6 миллионами консолей Sony которые, по оценкам, проданы на сегодняшний день, но это тоже не что иное новая технология. <div><br></div><div> Компания развертывает скромное обновление до своего оригинального дизайна и хотя вряд ли кто-то убедит кого-либо в обновлении новые покупатели, ожидающие увидеть какие функции принесет второе поколение могут быть заминированы. </div>
  <br>
  <a href="#" class="close">Закрыть</a>
  </div>
  </div>
  <a href="#zornet_ru">Появление окна</a>

КСС:

Код

#zornet_ru {
  background: rgba(19, 18, 18, 0.92);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  }
  #vebmastak {
  width: 585px;
  height: 330px;
  text-align: center;
  padding: 15px;
  border: 3px solid #88888c;
  border-radius: 10px;
  color: #505054;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: rgba(243, 239, 239, 0.98);
  }
  #zornet_ru:target {display: block;}
  .close {
  display: inline-block;
  border: 1px solid #606067;
  color: #323238;
  padding: 0 12px;
  margin: 20px;
  text-decoration: none;
  font-size: 13pt;
  cursor:pointer;
  border-radius: 3px;
  background: #c5e7ff;
  box-shadow: 0px 5px 19px 1px rgba(175, 170, 170, 0.9), 0px 8px 8px 12px rgba(0, 0, 0, 0);
  }
  .close:hover {background: rgba(227, 227, 241, 0.89);}

PS - не забываем, что все операторы работают, что код социальные закладки залить или форму входа.

12 Октября 2017 Просмотров: 2700 Комментариев: (0)

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

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

Kosten

Комментарии: 0