Добавить второе модальное окно jQuery

Question

Нужно добавить второе модальное окно, ломаю голову, как это сделать. Может можно привязать на кнопу id и получать его вместо класса $('.popup-open').click(function() { ., ?

 
<div class="popup-fade">
    <div class="popup">
        <a class="popup-close" href="#">Закрыть</a>
        <p>Всплывающие окна имеют широкий диапазон применений...</p>
    </div>      
</div>

<script>
$(document).ready(function($) {
    $('.popup-open').click(function() {
        $('.popup-fade').fadeIn();
        return false;
    }); 
    
    $('.popup-close').click(function() {
        $(this).parents('.popup-fade').fadeOut();
        return false;
    });     
 
    $(document).keydown(function(e) {
        if (e.keyCode === 27) {
            e.stopPropagation();
            $('.popup-fade').fadeOut();
        }
    });
    
    $('.popup-fade').click(function(e) {
        if ($(e.target).closest('.popup').length == 0) {
            $(this).fadeOut();                  
        }
    });
});
</script>

Answer 1

$(function() {
  $('.btn').click(function() {
    var modal = $(this).data('modal');
    $('.fade').show();
    $('#' + modal).addClass('active');
    $('#' + modal).find('.modal').addClass('active');
  });

  $('.close').click(function() {
    $('.fade').hide();
    $(this).parent().parent().removeClass('active');
    $(this).parent().removeClass('active');
  });
})

.modal {display: none; width: 300px; height: 150px; background: white;}
.active {display: block;}

.close {float: right; cursor: pointer;}
.fade {
  z-index: -1; display: none;
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  background: rgba(0, 0, 0, 0.8);
}

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

<button data-modal="modal_1" type="button" class="btn">Окно 1</button>
<button data-modal="modal_2" type="button" class="btn">Окно 2</button>

<div class="fade"></div>

<div class="modal" id="modal_1">
  <div class="close">Закрыть</div>
  <p>Открыто окно 1</p>
</div>

<div class="modal" id="modal_2">
  <div class="close">Закрыть</div>
  <p>Открыто окно 2</p>
</div>

upd. На основе вашего ответа:

$(function() {
  $('.btn').click(function() {
    var modal = $(this).data('modal');
    $('.fade').fadeIn(500);
    $('#' + modal).addClass('active');
  });

  $('.close, .fade').click(function() {
    $('.fade').fadeOut(500);
    $('.modal').removeClass('active');
  });

  $(document).keydown(function(e) {
    if (e.keyCode === 27) {
      e.stopPropagation();
      $('.fade').fadeOut(500);
      $('.modal').removeClass('active');
    }
  });
});

.fade {
  position: fixed;
  display: none;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  overflow: auto;
}

.modal {
  position: absolute;
  top: 10%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  background: #fff;
  max-width: 1080px;
  width: 80%;
  padding: 1em;
  z-index: 1001;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0;
  visibility: hidden;
}

.active {
  opacity: 1;
  visibility: visible;
}

.close {
  color: #000;
  position: absolute;
  right: .3em;
  top: 0;
  font-size: 2em;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn" data-modal="modal_1">Кнопка 1</button>
<button type="button" class="btn" data-modal="modal_2">Кнопка 2</button>

<div class="fade"></div>
<!--Подложка модального окна-->

<div class="modal" id="modal_1">
  <span class="close">&times;</span>
  <h2 class="h2">Окно 1</h2>

</div>

<div class="modal" id="modal_2">
  <span class="close">&times;</span>
  <h2 class="h2">Окно 2</h2>
</div>

Answer 2

Может кому пригодится, ниже выложу то, что я хотел и как у меня это получилось. Если есть, что поправить, поправьте, я ещё только учусь.

В итоге у меня получилось следующее:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn" data-modal="modal_1">Кнопка 1</button>
<button type="button" class="btn" data-modal="modal_2">Кнопка 2</button>

<div class="fade"></div> <!--Подложка модального окна-->

<div class="modal" id="modal_1">
                <span class="close">&times;</span>
                <h2 class="h2">Окно 1</h2>

</div>

<div class="modal" id="modal_2">
                <span class="close">&times;</span>
                <h2 class="h2">Окно 2</h2>
</div>

<style>
.fade{
    position: fixed;
    display: none;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    overflow: auto;
}
.modal{
    position: absolute;
    top: 10%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    background: #fff;
    max-width: 1080px;
    width: 80%;
    padding: 1em;
    z-index: 1001;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
    visibility: hidden;
}
.active{
    opacity: 1;
    visibility: visible;    
}
.close{
    color: #000;
    position: absolute;
    right: .3em;
    top: 0;
    font-size: 2em;
    cursor: pointer;
}
</style>

<script>
$(function() {
  $('.btn').click(function() {
    var modal = $(this).data('modal');
    $('.fade').fadeIn(500);
    $('#' + modal).addClass('active');
  });

  $('.close').click(function() {
    $('.fade').fadeOut(500);
    $('.modal').removeClass('active');
  });

  $('.fade').click(function(e){
      if ($(e.target).closest('.modal').length == 0) {
        $('.fade').fadeOut(500);
        $('.modal').removeClass('active');         
      }
    });

  $(document).keydown(function(e) {
    if (e.keyCode === 27) {
      e.stopPropagation();
      $('.fade').fadeOut(500);
      $('.modal').removeClass('active');
    }
  });
});
</script>

БЛОГ НА HUSL

Добавить второе модальное окно jQuery

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