Как сделать весь фон недоступным для кликов, когда мое всплывающее окно отображается в блоггере? - PullRequest
Новая
       37

Как сделать весь фон недоступным для кликов, когда мое всплывающее окно отображается в блоггере?

0 голосов
/ 17 мая 2019

Я хочу отключить фон, пока пользователь не нажмет кнопку X. Я использую приведенный ниже код CSS, чтобы заблокировать всю страницу, когда появилось всплывающее окно. Но это работает (видимая страница охватывает не все). У меня проблема, если моя страница с полосой прокрутки означает, что оставшаяся нижняя часть страницы не закрыта блокировщиком. 

#pop {
  height: 150px;
  width: 150px;
  position: fixed;
  bottom: 50%;
  right: 50%;
  border: 2px solid;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 7px;
  z-index: 999;
}

#close {
  right: 5;
  top: 5;
  float: right;
}
<div id="pop">
  <button id="close" onclick="document.getElementById('pop').style.display='none'">X</button>
</div>

1 Ответ

0 голосов
/ 17 мая 2019

Попробуйте это должно помочь 

.display {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000000;
  display: none;
}

.display2 {
  background-color: White;
  border: 2px solid black;
  display: block;
  width: 350px;
  z-index: 1001;
  top: 60px;
  left: 240px;
  position: fixed;
  padding-left: 10px;
  margin: auto;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
<div style="display">
  <div id="divOperationMessage" style="display2">
    ---------content inside---------

  </div>
  <div>
    <a id="myPopup" href="#" onclick="myFunction()">Click</a>
  </div>
</div>

<script>
  // When the user clicks on div, open the popup
  function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
  }
</script>
...