» »

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


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

Больше замечаем, что теперь обратная связь становится на модальное окно. Так как так и красивей и намного удобней, и не только этот код можно установить. Здесь очередное окно, только уже в оригинальном дизайн, так как можно заметить по всем сторонам у него идет каемка, что смотрится стильно. Но и сама кнопка здесь прозрачна, что сразу заметна и немного больше стандартной. Но думаю здесь главный плюс, это сам код и под него стиля, в стилях мы делаем какой нужно размер.

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

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

Код
<a href="#login_form" id="login_pop">Открыть окно</a>
<!-- popup форма -->
<a href="#x" class="overlay" id="login_form"></a>
<div class="popup">
Место под описание что будет в окне
  <a class="close" href="#close"></a>
</div>


Но остается CSS:

Код
.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  cursor: default;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 1;
   
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup {
  background-color: #fff;
  border: 3px solid #fff;
  display: inline-block;
  left: 50%;
  opacity: 0;
  padding: 15px;
  position: fixed;
  text-align: justify;
  top: 40%;
  visibility: hidden;
  z-index: 10;
   
  -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-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
   
  -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
  -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
  -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
   
  -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;
}
.overlay:target+.popup {
  top: 50%;
  opacity: 1;
  visibility: visible;
}
.close {
  background-color: rgba(0, 0, 0, 0.8);
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  top: -15px;
  width: 30px;
   
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
}
.close:before {
  color: rgba(255, 255, 255, 0.9);
  content: "X";
  font-size: 24px;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
  background-color: rgba(64, 128, 128, 0.8);
}


Вот теперь все, можно ставить, красиво будет на светлом сайте.
Источник: Bloggood.ru
25.04.2016 Просмотров: 642 Комментарий: (5)

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

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

Комментарий: 5
Сафрон
Сафрон 25.04.2016 02:401
0
В таком случай нужно DEMO делать, вот мне это понравилось модальное окно, но какой эффект у него появление, вот это тоже не мало важный факт.
Kosten
Kosten 25.04.2016 02:472
0
Да не спорю, что здесь реально нужна демонстрация, что остается, делать будем, так как на одном стиле, сделать не сложно. Но как то файлом делают, что можно в архив закинуть.
FeStemBer
FeStemBer 25.04.2016 02:503
0
Костен, но Сафрон, дело говорит, здесь как в авто салоне, нужно посмотреть, если что на гашетку нажать, прочувствовать, подойдет ли на сайт. biggrin
Tergran
Tergran 26.04.2016 18:344
0
Вообще красиво смотрится, еще нужно саму кнопку на угол поставить, и нормальное окно, простота его удивляет, про установку так молчу, нужно поверхностные знание, и вы поставите на сайт.
tsakonter
tsakonter 26.04.2016 18:375
0
А что не заметно, что здесь основном и подборка вся состоит из CSS, редко окно встретишь, чтоб еще с ним скрипт шел. Но мне все равно, для меня лучше, чтоб в корень сайта поставить, и можно так сделать, чтоб оно не одно на сайте было, а также на что то второе установить его.
avatar