0

Сделал модальное окно, но при его открытии возможна активность в остальной части экрана. Как сделать так, чтобы нельзя было клацать по другим объектам на странице, пока данной окно открыто?

1
  • вы можете дополнительно показывать враппер бекграундом, пока окно активно. Что не позволит клацать по части страницы
    – Taarim
    7 мар 2019 в 10:20

2 ответа 2

1

Упрощенный пример. При выводе модального окна всю остальную часть сайта перекрываете полупрозрачным блоком. И вы уже не сможете кликнуть ни на кнопке ни на ссылке

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: gray;
  opacity: 0.5;
  z-index: 10;
}

.modal {
  z-index: 20;
  background-color: blue;
  color: white;
  padding: 5rem;
  position: absolute;
  top: 5rem;
  left: 5rem;
  right: 5rem;
  text-align: center;
}
<h1>Основной контент</h1>
<a href="#">Ссылка</a><br />
<button>Кнопка</button>
<div class="backdrop"></div>
<div class="modal">Модальное окно</div>

0

НА случай если вы пользуетесь jQ

var wrap = $('#wrapper'),
     btn = $('.open-modal-btn'),
     modal = $('.cover, .modal, .content');

btn.on('click', function() {
  modal.fadeIn();
});

// close modal
$('.modal').click(function() {
  wrap.on('click', function(event) {
    var select = $('.content');
    if ($(event.target).closest(select).length)
      return;
    modal.fadeOut();
    wrap.unbind('click');
  });
});
.cnt {
  text-align: center;
}

.cover {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  z-index: 100;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: scroll;
  padding: 20px;
  z-index: 200;
}

.content {
  display: none;
  width: 100%;
  min-width: 200px;
  width: 100%;
  position: relative;
  background-color: #FAFAFA;
  z-index: 300;
  padding: 50px 0;
}

.open-modal-btn {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="cover"></div>
  <div class="modal">
    <div class="content">
      <p>THIS IS CONTENT</p>
      <form onsubmit="return false">
        <input type="text" placeholder="test">
        <input type="submit" />
      </form>
    </div>
  </div>

  <div class="cnt">
    <button class="open-modal-btn">OPEN MODAL</button>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.