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

Создать модальное окно на HTML и чистом CSS

Рассмотрим небольшой мануал по созданию модальные окна на HTML и чистом CSS, но без JavaScript и jQuery, где все четко и корректно работает. Иногда на сайте нужно разместить модальное окно, которое по своей стилистике смотрелось красиво, также присутствовала кнопка, где написано, как пример "закрыть" или отключить, вообще убрать. То в этом случай идем интернет и ищем подходящий материал, но также можно самому все сделать.

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

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

Это полностью настроено окно под такой стиль.

Как сделать простое модальное окно на CSS

Приступаем к установке:

HTML

Код

<div id="varuval-nesanud" class="modalbackground">
  <div class="modalwindow">
  <h3>ZorNet.Ru - портал для вебмастера</h3>
  <p>Здесь будет описание, которое устанавливаем под размер</p>
  <a href=" ">Закрыть</a>
  </div>
</div>

CSS

Код

.modalbackground {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(16, 16, 16, 0.59);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}

.modalbackground:target {
  opacity: 1;
  pointer-events: auto;
}

.modalwindow {
  width: 100%;
  max-width: 508px;
  margin: 3% auto;
  padding: 1%;
  background: #eaeaea;
  border-radius: 5px;
}

.modalwindow h3 {
padding: 0;
margin: 0;
}

.modalwindow p {
padding: 0;
margin: 4% 0 8% 0;
}

.modalwindow a {
  display: block;
  color: #f3efef;
  background: #1d4c7b;
  padding: 2%;
  margin: 0 auto;
  width: 73%;
  border-radius: 85px;
  text-align: center;
  text-decoration: none;
}

.modalwindow a:hover {
background: #366492;
}

Окно вызова:

Код

<a href="#varuval-nesanud">Открыть модальное окно</a>

В мануале, что плавно перешел в материал, кратко пояснено, как можно самому выставить или создать окно, которое открывается по клику по названию или по кнопке, где все рассчитано на чистом HTML и CSS.

Все проверено, где также будет demo, что изначально смотрим по работе, так как уже сказано было, что идет в простом виде, то эффектов здесь нет, а чисто появилось окно, и когда стало не нужно, что аналогично по клику его закрываем.

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

30 Октября 2018 Просмотров: 1697 Комментариев: (0)

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

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

Kosten

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