ZorNet.Ru — сайт для вебмастера » Ajax модальное окно » Простое всплывающие окно на чистом CSS3

Простое всплывающие окно на чистом CSS3

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

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

Так при открытие страницы наблюдаем кнопку:

Стильная кнопка для сайта на HTML+CSS

Далее создаем клик по ней и из нее всплываем модальное окно:

Установка:

HTML

Код

<a href="#amolasd-kigas" class="btn">Открыть</a>
<div id="amolasd-kigas" class="amolasd-kigas">
  <a href="#" class="delomes">×</a>
  <h2>ZORNET.RU</h2>
  <p>Здесь идет описание или операторы для функциональности.</p>
</div>
<a href="#" class="delomes-amolasd-kigas"></a>

CSS

Код

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
body {
  text-align: center;
  background-color: #222;
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  line-height: 1.5;
}
a {
  color: #fff;
  text-decoration: none;
}
.btn {
  padding: 15px 45px;
  border: 1px solid #fff;
  border-radius: 0.5em;
  display: inline-block;
  margin-top: 2em;
  background-color: transparent;
  font-weight: 700;
  transition: .3s;
}
.btn:hover {
  background-color: #fff;
  color: #222;
}
.amolasd-kigas {
  position: fixed;
  padding: 10px;
  max-width: 500px;
  border-radius: 0.5em;
  top: 50%;
  left: 50%;
  color: #000;
  transform: translate(-50%, -50%);
  background-color: rgba(255,255,255,1);
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s, visibility 0s linear .5s;
  z-index: 1;
}
.amolasd-kigas:target {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.amolasd-kigas .delomes {
  position: absolute;
  right: 5px;
  top: -15px;
  padding: 5px;
  color: #2b2a2a;
  transition: color .3s;
  font-size: 2em;
  /* line-height: 1.5; */
  font-weight: 700;
}
.amolasd-kigas .delomes:hover {
  color: #f00;
}
.delomes-amolasd-kigas {
  background-color: rgba(0,0,0,.7);
  cursor: default;
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility 0s linear .5s;
}
.amolasd-kigas:target + .delomes-amolasd-kigas {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

На этом установка завершена!

Демонстрация

29 Апреля 2021 Загрузок: 2 Просмотров: 1326 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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