ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Всплывающее окно с затемнением фона CSS

Всплывающее окно с затемнением фона CSS

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

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

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

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

1 Первое:

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

Устанавливаем первое окно:

HTML

Код

<button id="modal-btn" class="button">Открыть</button>

  <div id="my-modal" class="modal">
  <div class="modal-content">
  <div class="modal-header">
  <span class="close">×</span>
  <h2>Название</h2>
  </div>
  <div class="modal-body">
  <p>Заголовок</p>
  <p>Здесь идет краткое описание.</p>
  </div>
  <div class="modal-footer">
  <h3>Ниже можно написать</h3>
  </div>
  </div>
  </div>

CSS

Код

.button {
  background: #428bca;
  padding: 1em 2em;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background: #3876ac;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  margin: 10% auto;
  width: 60%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  animation-name: modalopen;
  animation-duration: var(--modal-duration);
}

.modal-header h2,
.modal-footer h3 {
  margin: 0;
}

.modal-header {
  background: var(--modal-color);
  padding: 15px;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modal-body {
  padding: 10px 20px;
  background: #fff;
}

.modal-footer {
  background: var(--modal-color);
  padding: 10px;
  color: #fff;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.close {
  color: #ccc;
  float: right;
  font-size: 30px;
  color: #fff;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopen {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
}

Код

// Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close');

// Events
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);

// Open
function openModal() {
  modal.style.display = 'block';
}

// Close
function closeModal() {
  modal.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == modal) {
  modal.style.display = 'none';
  }
}

На этом весь установочный процесс:

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

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

2. Установка на второе окно:

В HEAD

Код

HTML

Код

<a href="#" class="modal-trigger" data-modal="modal-name">Открыть</a>
<div class="modal" id="modal-name">
  <div class="modal-sandbox"></div>
  <div class="modal-box">
  <div class="modal-header">
  <div class="close-modal">✖</div>
  <h1>Simple modal box</h1>
  </div>
  <div class="modal-body">
  <p>Первое описание</p>
  <p>Второе описание</p>


  <button class="close-modal">Close!</button>
  </div>
  </div>
</div>

CSS

Код

.modal,
.modal-box {
  z-index: 900;
}

.modal-sandbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
}

.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgb(0,0,0);
  background: rgba(0,0,0,.8);
  overflow: auto;
}

.modal-box {
  position: relative;
  width: 80%;
  max-width: 920px;
  margin: 100px auto;
  animation-name: modalbox;
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(0,0,.3,1.6);
}

.modal-header {
  padding: 20px 40px;
  background: #546E7A;
  color: #ffffff;
}

.modal-body {
  background: #ECEFF1;
  padding: 60px 40px;
}

/* Close Button */
.close-modal {
  text-align: right;
  cursor: pointer;
}

/* Animation */
@-webkit-keyframes modalbox {
  0% {
  top: -250px;
  opacity: 0;
  }
  100% {
  top: 0;
  opacity: 1;
  }
}

@keyframes modalbox {
  0% {
  top: -250px;
  opacity: 0;
  }
  100% {
  top: 0;
  opacity: 1;
  }
}

/* Aditional Styles */
* {
  font-family: "Roboto", sans-serif;
  font-weight: normal;
}

p {
  line-height: 1.4em;
}

body {
  background: #B0BEC5;
}

.modal-trigger, button {
  top: 50%;
  left: 50%;
  padding: 20px 40px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
}

.modal-trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: ease .2s;
}

button {
  border: 1px solid #333333;
  outline: none;
  color: #333333;
}

.modal-trigger:hover {
  padding: 20px 60px;
}

Код

$(".modal-trigger").click(function(e){
  e.preventDefault();
  dataModal = $(this).attr("data-modal");
  $("#" + dataModal).css({"display":"block"});
});

$(".close-modal, .modal-sandbox").click(function(){
  $(".modal").css({"display":"none"});

});

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

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

10 Марта 2020 Загрузок: 2 Просмотров: 4971 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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