Любое количество скрытых окон на странице

Question

Имеется следующий скрипт для открытия скрытого окна. Как его изменить, чтобы была возможность размещения и открытия любого количества скрытых окон на странице? Например, через data-id=. Благодарю!

$(document).ready(function() {
  var overlay = $('#overlay');
  var open_modal = $('.open_modal');
  var close = $('.modal_close');
  var modal = $('.modal_div');

  open_modal.click(function(event) {
    event.preventDefault();
    var div = $(this).attr('href');
    overlay.fadeIn(400,
      function() {
        $('body').css('overflow-y', 'hidden');
        $('#overlay').css('overflow-y', 'scroll');
        if ($(overlay).innerHeight() > $(div).outerHeight()) {
          $(div).css("margin-top", ($(overlay).innerHeight() / 2 - $(div).outerHeight() / 2) + "px");
        }
        $(div)
          .css('display', 'block')
          .animate({
            opacity: 1,
            top: '0'
          }, 200);
      });
  });
  close.click(function() {
    modal
      .animate({
          opacity: 0,
          top: '0'
        }, 200,
        function() {
          $(this).css('display', 'none');
          overlay.fadeOut(400);
          $('#overlay').css('overflow-y', 'hidden');
          $('body').css('overflow-y', 'auto');
        }
      );
  });
});

#overlay {
  display: none;
  z-index: 999;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 1);
}

.modal_div {
  display: none;
  z-index: 1000;
  width: 200px;
  background-color: white;
}

.modal_close {
  position: fixed;
  top: 10px;
  left: 50%;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#modal" class="open_modal">Открыть окно 1</a>
<br><br>
<a href="#modal" class="open_modal">Открыть окно 2</a>

<div id="overlay">
  <div class="modal_close">Закрыть</div>
  <div id="modal" class="modal_div">Окно 1</div>
</div>

<div id="overlay">
  <div class="modal_close">Закрыть</div>
  <div id="modal" class="modal_div">Окно 2</div>
</div>

Answer 1

Можно либо генерировать html модалки "на лету", либо давать разные id (как в ниже приведенном примере)

$(document).ready(function() {
  $('.open_modal').click(function(event) {
    event.preventDefault();
    let div = $(this).attr('href'),
        overlay = $(div).closest('.overlay');
    overlay.fadeIn(400,
      function() {
        $('body').css('overflow-y', 'hidden');
        overlay.css('overflow-y', 'scroll');
        if (overlay.innerHeight() > $(div).outerHeight()) {
          $(div).css("margin-top", (overlay.innerHeight() / 2 - $(div).outerHeight() / 2) + "px");
        }
        $(div)
          .css('display', 'block')
          .animate({
            opacity: 1,
            top: '0'
          }, 200);
      });
  });
  $('.modal_close').click(function(e) {
    $(e.target).closest('.overlay').find('.modal_div')
      .animate({
          opacity: 0,
          top: '0'
        }, 200,
        function() {
          $(this).css('display', 'none');
          $(e.target).closest('.overlay').fadeOut(400);
          $(e.target).closest('.overlay').css('overflow-y', 'hidden');
          $('body').css('overflow-y', 'auto');
        }
      );
  });
});

.overlay {
  display: none;
  z-index: 999;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 1);
}

.modal_div {
  display: none;
  z-index: 1000;
  width: 200px;
  background-color: white;
}

.modal_close {
  position: fixed;
  top: 10px;
  left: 50%;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#modal_1" class="open_modal">Открыть окно 1</a>
<br><br>
<a href="#modal_2" class="open_modal">Открыть окно 2</a>

<div class="overlay">
  <div class="modal_close">Закрыть</div>
  <div id="modal_1" class="modal_div">Окно 1</div>
</div>

<div class="overlay">
  <div class="modal_close">Закрыть</div>
  <div id="modal_2" class="modal_div">Окно 2</div>
</div>

upd.

$('.open_modal').on('click', function (e) {
  let content = $($(e.target).attr('href')).clone();
  $('<div class="overlay"><div class="modal_close">Закрыть</div></div>').prependTo($('body'));
  $('body .overlay').append(content);
  content.show();
  $('body .overlay > .modal_close').click( e => $(e.target).closest('.overlay').remove() );
});

.overlay {
  display: block;
  z-index: 999;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 1);
}

.modal_div {
  display: none;
  z-index: 1000;
  width: 200px;
  background-color: white;
  margin-top: 20vh;
}

.modal_close {
  position: fixed;
  top: 10px;
  left: 50%;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#modal_1" class="open_modal">Открыть окно 1</a>
<div id="modal_1" class="modal_div">Окно 1</div>
<br><br>
<a href="#modal_2" class="open_modal">Открыть окно 2</a>
<div id="modal_2" class="modal_div">Окно 2</div>

БЛОГ НА HUSL

Любое количество скрытых окон на странице

Ответы (1 шт):