1

Нужно добавить второе модальное окно, ломаю голову, как это сделать. Может можно привязать на кнопу 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>

2 ответа 2

0

$(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>

1
  • Благодарю! На основе Вашего кода, я допилил свой!
    – Andrey
    13 фев 2021 в 15:50
0

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

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

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


1
  • @Sevastopol' да, спасибо, у себя аналогично сократил (в своём файле, не тут), голова немного уже забита за весь день, гораздо удобнее Ваш вариант, вот он, опыт))
    – Andrey
    13 фев 2021 в 18:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.