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

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

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

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

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

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

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

Модальное окно для сайта на 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;
}

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

Демонстрация
2021-04-29 Загрузок: 1 Просмотров: 305 Комментарий: (0)

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

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

Оставь свой отзыв

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