Javascript-форум - Затемнение экрана

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Затемнение экрана (https://javascript.ru/forum/dom-window/55916-zatemnenie-ehkrana.html)

Затемнение экрана

Добр Всем! Подсккажите пожалуйста! Как сделать чтобы при всплывающем окне на сайте WordPress
затухал экран (сайт). Код всплывающего окна простой:

<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' 
onclick="document.getElementById('PopUp').style.display='block'">
<span style="text-decoration: underline;">Текст ссылки для открытия окна</span></a>

<div id='PopUp' style='display: none; position: absolute; overflow: auto; 
overflow-x: hidden; right: 400px; top: 50px; border: solid black 1px; padding: 10px; 
background-color: rgb(255,255,225); text-align: justify; font-size: 12px; height: 300px; width: 635px;'>

Кнопка закрытия окна

<br /><div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' 
style='font-size: 12px; top: 5px;' onfocus='this.blur();' 
onclick="document.getElementById('PopUp').style.display = 'none' " >
<span style="text-decoration: underline;">закрыть</span></a></div>

Текст окна

Есть блок:

<style>
#opPopUp {
background: #000;
height: 100%;
opacity: 0.5;
position: fixed;
width: 100%;
z-index: 100;
top: 0;
left: 0;
}

</style>

Так вот вопрос??? как вписать в функцию открытия окна opPopUp Заранее спасибо.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .wrapper {
      width: 75%;
      margin: auto;
    }

    .popup {
      width: 30%;
      background: #fff;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 1000;
      display: none;
      box-shadow: 2px 2px 10px #ccc;
      display: 
    }

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

    .content {
      position: relative;
      padding: 30px;
    }

    .close {
      position: absolute;
      top: 10px;
      right: 50px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      line-height: 20px;
      color: red;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus optio, natus quae architecto cum id assumenda obcaecati laboriosam at quo iste repellendus reiciendis maiores perferendis eaque sint. Impedit, voluptate, quis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam repudiandae aspernatur, molestias reprehenderit inventore nemo ipsa cupiditate tempore quas labore aut facilis dignissimos at, perspiciatis accusantium totam, error cumque, aliquam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium dicta id facilis sint repudiandae distinctio minima architecto quae quam sapiente dignissimos ratione saepe, culpa nesciunt ad dolor, ipsam, temporibus in.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, impedit excepturi assumenda iste architecto nemo maxime, sed recusandae illo illum nulla. Sint, cum. Voluptas omnis, provident eligendi alias atque nemo.</p>

    <button class="button">Open popup</button>
  </div>

  <div class="popup">
    <div class="content">
      <div class="close">Закрыть</div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis non distinctio quod, asperiores quaerat commodi sequi modi nam facere at, nisi possimus corporis iste ipsa. Adipisci nobis possimus autem facilis.
    </div>
  </div>
  <div class="overlay"></div>

  <script>
    (function() {
      var popup = document.querySelector('.popup'),
          overlay = document.querySelector('.overlay'),
          close = document.querySelector('.close'),
          button = document.querySelector('.button');

      button.addEventListener('click', function() {
        overlay.style.display = "block";
        popup.style.display = "block";
        positionCenter(popup);
      });

      close.addEventListener('click', function() {
        popup.style.display = "none";
        overlay.style.display = "none";
      });

      function positionCenter(elem) {
        var elemHeight = window.getComputedStyle(elem).height,
            elemWidth = window.getComputedStyle(elem).width;
        elem.style.marginTop = "-" + parseInt(elemHeight) / 2 + "px";
        elem.style.marginLeft = "-" + parseInt(elemWidth) / 2 + "px";
      }
    })();
  </script>
</body>
</html>

Интересно а в винде еще не сделали такую фичу? Ну, типа вызвал диспетчер задач или открыл свойства компа - и все остальное погрузилось во тьму?

Я понимаю что идет контент поверх контента, но есть же стандартные методы отделения контента от контента. Самый известный - широкие поля. Задал 20-30 пикселов и тенюхой с маленьким bias'ом подбил и проканает.

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

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

kostyanet, заведи себе блог.

На раньше чем вы почитаете у Лескова про то, что англичане ружья кирпичом не чистят.