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

Светлое сплывающее окно на Javascript и CSS

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

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

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

Все как поняли не очень сложно, по установке также.

Сама установка:

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

Код

<a class="open_window" href="#">Клик на открытие окна</a>
<div class="oregtsuner" title="окно"></div>
<div class="zornet_skript">
<div class="close_window">x</div>
<p><div align="center"><img border="0" align="absmiddle" src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png">
<hr>
<p>Nintendo выпустила обновление своего ежегодного прогноза прибыли сегодня, существенно увеличив объем прибыли, которую он рассчитывает заработать в конце финансового года (финансовый год Nintendo заканчивается в марте.</div></p>
</div>

Далеко не уходим, можно ниже прописать скрипт.

Код

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

Код

.oregtsuner {
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0;
  cursor: default;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 99999;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.zornet_skript {
  background-color: #fff;
  border: 3px solid #fff;
  display: inline-block;
  left: 50%;
  opacity: 0;
  padding: 15px;
  width: 300px;
  height: 323px;
  position: fixed;
  text-align: justify;
  top: 50%;
  visibility: hidden;
  z-index: 999999;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: opacity .5s, top .5s;
  -moz-transition: opacity .5s, top .5s;
  -ms-transition: opacity .5s, top .5s;
  -o-transition: opacity .5s, top .5s;
  transition: opacity .5s, top .5s;
  border-radius: 11px;
}

.zornet_skript .close_window {
  width: 6px;
  height: 17px;
  position: absolute;
  padding: 1px 9px 4px 9px;
  top: -15px;
  right: -15px;
  cursor: pointer;
  color: #fff;
  font-family: 'tahoma', sans-serif;
  background: -webkit-gradient(linear, left top, right top, from(#3d51c8), to(#051fb8));
  background: -webkit-linear-gradient(top, #3d51c8, #051fb8);
  background: -moz-linear-gradient(top, #3d51c8, #051fb8);
  background: -o-linear-gradient(top, #3d51c8, #051fb8);
  background: -ms-linear-gradient(top, #3d51c8, #051fb8);
  background: linear-gradient(top, #3d51c8, #051fb8);
  background-color: #3d51c8;
  border: 1px solid #061fb8;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
}

.zornet_skript .close_window:hover {
  background: -webkit-gradient(linear, left top, right top, from(#051fb8), to(#3d51c8));
  background: -webkit-linear-gradient(top, #051fb8, #3d51c8);
  background: -moz-linear-gradient(top, #ff5f0, #3d51c87);
  background: -o-linear-gradient(top, #051fb8, #3d51c8);
  background: -ms-linear-gradient(top, #051fb8, #3d51c8);
  background: linear-gradient(top, #051fb8, #3d51c8);
  background-color: #051fb8;
  border: 1px solid #00385E;
}

.zornet_skript .close_window:active {
  background: #8f9be0;
}

Для этого сделана демонстрация, где можете посмотреть работоспособность.

03 Ноября 2017 Просмотров: 1365 Комментариев: (0)

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

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

Kosten

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