Делаем попап без плагина fancybox

Цель – сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без использования javascript, но нам нужен стабильно работающий в во всех браузерах вариант, поэтому js мы все же здесь используем.

HTML

Упрощенный вариант нашего HTML-кода.

<a id="popup" href="javascript:void(0);">Open</a>

<div class="pop-overlay">
  <div id="popup-window" class="popup-window">
    <div class="inner">
      <h4>Installing WordPress</h4>
      <p>WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you. However, if you wish to install WordPress yourself, the following guide will help. Now with Automatic Upgrade, upgrading is even easier.</p>
    </div>
    <a href="javascript:void(0);" class="btn-close">Close</a>
  </div>
</div>

JS

Перед скриптом должна быть подключена библиотека jquery, например
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Если у вас она уже подключена, то не нужно подключать ее еще раз.
Такой у меня получился js-код

<script>
  var $popUp = $('#popup');
  var $popOverlay = $('.pop-overlay');
  var $popWindow = $('#popup-window');
  var $popClose = $('.popup-window .btn-close');

  $popUp.on('click', function(){
    $popOverlay.fadeIn();
    $popWindow.fadeIn();
  });

  $popClose.on('click', function(){
    $popOverlay.fadeOut();
    $popWindow.fadeOut();
  });

  $(function(){
    $(document).on('click', function(event) {
      if ($(event.target).closest($popUp).length) return;
      if ($(event.target).closest($popWindow).length) return;
      $popOverlay.fadeOut();
      $popWindow.fadeOut();
      event.stopPropagation();
    });
  });
</script>

CSS

Упрощенный вариант стилей css

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .pop-overlay { 
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 100;
  }
  .popup-window {
    display: none;
    position: absolute;
    background: #fff;
    width: 90%;
    max-width: 520px;
    left: 50%;
    margin-left: -260px;
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    font-size: 1em;
    line-height: 1.2em;
    text-align: right;
    box-sizing: border-box;
  }
  .popup-window .inner {
    max-height: 360px;
    overflow-y: auto;
    background: #F4F4F4;
    padding: 10px;
    margin-bottom: 10px; 
    text-align: left;
  }
  .popup-window .btn-close {
    display: inline-block;
    border: 1px solid #848484;
    border-radius: 3px;
    padding: 0 15px;
    color: #444444;
    line-height: 1.8em;
    text-decoration: none;
  }
  .popup-window .btn-close:hover,
  .popup-window .btn-close:active, 
  .popup-window .btn-close:focus { 
    text-decoration: none; 
    background: #f4f4f4;
  }
  @media screen and (max-width: 600px) {
    .popup-window {
      margin-left: -45%;
    }
  }
</style>

Скриншот

Пример работы данного скрипта для нескольких всплывающих окон на странице

See the Pen Popup window without Fancybox by Denis (@deniscreative) on CodePen.0