Javascript-форум - Показать сообщение отдельно

Decode · #2 (**permalink**) 21.05.2015, 01:15

<!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>