» »

Модальное всплывающее окно на CSS

Модальное всплывающее окно на CSS

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

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

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

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

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

Модальное окно на разные тематические сайты

Это как раз то открытие, где идет затемненный фон, что не стал его сильно под палитру темную ставить, а немного темно серая палитра в полу прозрачной форме.

Красивое всплывающее модальное окно

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

HTML

Код
<button class="kubesinav">Вызова модального окна</button>
<div class="dakageonuvem">
  <div class="vedanacu-macesogam">
  <span class="necludevaga-monsunedsag">×</span>
  <h1>Модальное всплывающее окно CSS</h1>
  <p class="bukas">Здесь описание под заголовком</p>  
   
  </div>
</div>

CSS

Код
.dakageonuvem {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(33, 31, 31, 0.53);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.vedanacu-macesogam {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fbfbfb;
  padding: 7px 10px;
  width: 41%;
  border-radius: 5px;
  font-size: 10px;
  border: 2px solid #aaabad;
}
.necludevaga-monsunedsag {
  float: right;
  width: 28px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  border-radius: 85px;
  background-color: #dcd6d6;
  border: 2px solid #bdb7b7;
}
  .necludevaga-monsunedsag:hover {
  background-color: darkgray;
  }
  .nesnamuseg-koundakageon {
   
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }

.kubesinav {
  background-color: #b02794;
  color: #f5f1f1;
  padding: 12px 8px;
  font-size: 17px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  width: 270px;
  border-radius: 100px;
  border: 2px solid #fdfdfd;
  box-shadow: 0px 0px 11px 1px rgba(82, 80, 80, 0.78), 0px 0px 4px 1px rgba(27, 25, 25, 0.66);
}

.bukas {
  font-size: 15px;
  text-align: justify;
  }

JS

Код
var dakageonuvem = document.querySelector(".dakageonuvem");
  var kubesinav = document.querySelector(".kubesinav");
  var closeButton = document.querySelector(".necludevaga-monsunedsag");

  function toggledakageonuvem() {
  dakageonuvem.classList.toggle("nesnamuseg-koundakageon");
  }

  function windowOnClick(event) {
  if (event.target === dakageonuvem) {
  toggledakageonuvem();
  }
  }

  kubesinav.addEventListener("click", toggledakageonuvem);
  closeButton.addEventListener("click", toggledakageonuvem);
  window.addEventListener("click", windowOnClick);

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

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

Демонстрация
2019-03-02 Загрузок: 1 Просмотров: 361 Комментарий: (3)

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

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

Комментарий: 3
waak
waak 2019-03-02 21:261
0
Ужас а не скрипт!
можно сделать гораздо проще и короче скрипт
Kosten
Kosten 2019-03-02 21:502
0
А в чем в нем такого ужасного, и так по минимум скрипта и стилей. Просто после таких постов основном свой вариант дают, который считают по себе как можно проще. Хотя и этот простой до ужасного, хотя на чистом стиле безусловно легче будет.
-SAM-
-SAM- 2019-03-02 22:183
0
Тут согласен с вами обоими, просто один пишет из позиции разработчика, другой - из позиции простого пользователя. Каждый из вариантов имеет право на жизнь, просто нужно указывать прямо на недостатки и давать ссылку на альтернативный вариант сразу (чтобы был выбор, какой из них подойдёт кому - такой и используют).
И как уже говорил, что в таких случаях указывать, что оно на CSS - нет смысла, ведь опять идёт через JS... СSS почти во всех материалах, это визуальная составляющая... и когда на него акцент делают в заглавии, то это должно лишь быть в случаях, когда решение на одних только CSS и реализовано... в этом случае - нет (функционал вызова окна реализован через JS, соответственно при отключенном в браузере - ничего не произойдёт, в отличии от решения на чистом CSS).
P.S.: варианты разные указаны в блоке "Похожие материалы". Ну и я понимаю почему тут написано "на CSS" - просто чтобы дублей не было названий. || UPD.: продолжение темы здесь.
avatar