Несколько модалов

Question

Я пытаюсь добавить несколько модальных окон на свою страницу, но не очень хорошо справляюсь с этим. В настоящее время я использую код ниже, и мне нужно будет изменить его, чтобы его можно было использовать с несколькими модалами.

HTML:

<div class="modal"> 
<div class="overlay"></div> 
    <div class="modal--contents modal--transition"> 
    <a class="modal--close" href="#"><img src="/images/icons/modal/close.png">Close</a> 
    <h2>How to install on Windows</h2> 
    <div class="instructions"> 
     <div class="instructions-single"> 
      <img src="/images/placeholders/step.png" alt="Step 1"> 
      <h3>Step 1</h3> 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
     </div> 
     <div class="instructions-single"> 
      <img src="/images/placeholders/step.png" alt="Step 2"> 
      <h3>Step 2</h3> 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
     </div> 
     <div class="instructions-single"> 
      <img src="/images/placeholders/step.png" alt="Step 3"> 
      <h3>Step 3</h3> 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
     </div> 
    </div> 
    </div> 
</div> 

<a href="javascript:void(0)" class="overlay--trigger btn"><img src="/images/icons/download/help_icon.png" alt="Help">How to install</a> 

JS:

var modal = $('.modal'); 

$(".btn").on("click", function() { 
    $(modal).toggleClass('modal--show'); 
}); 

$(".overlay").on("click", function() { 
    $(modal).toggleClass('modal--show'); 
}); 

$(".modal--close").on("click", function() { 
    $(modal).toggleClass('modal--show'); 
}); 

Answer 1

Если вы используете несколько модальности на одной странице я хотел бы сделать что-то вроде это:

, где когда-либо у вас есть .btn вы хотите, чтобы вызвать определенную модальность, добавьте data-attr к нему так:

<div class="btn" data-modal-type="type1"> 

или

<div class="btn" data-modal-type="type2"> 

, и я хотел бы добавить, может быть, id в то же самое html для каждого модала:

<div class="modal" id="type1"> 

Вы должны нажать этот тип на щелчок и использовать его для запуска ger надлежащий модальный:

$(".btn").click(function(){ 
    var Type = $(this).data("modal-type"); 
    $("#"+Type).toggleClass('modal--show'); 
}); 

Таким образом, вы более конкретно относитесь к модальному запуску.

SAMPLE FIDDLE

Чтобы быть честным, хотя, тем более эффективный способ сделать это мой используя ajax динамически загружать отдельный файл с соответствующей информацией при нажатии кнопки. Таким образом, у вас будет только один модальный скрипт и обмен информацией.

UPDATE

Это то, что я имею в виду на основе с вашего codePen:

CODEPEN

Answer 2

Вместо $(modal) использовать modal. везде

var modal = $('.modal'); 
$(".btn").on("click", function() { 
modal.toggleClass('modal--show'); 
}); 

$(".overlay").on("click", function() { 
    modal.toggleClass('modal--show'); 
}); 

$(".modal--close").on("click", function() { 
    modal.toggleClass('modal--show'); 
});