Multiple modals

Question

I'm trying to add multiple modal windows to my page, but don't manage very well at it. Currently I'm using code below and I would need to modify it to be usable with multiple modals as well.

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

If you're using multiple modals on one page I would do something like this:

where ever you have a .btn you want to trigger a specific modal, add a data-attr to it like so:

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

or

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

and I would add maybe an id of the same to the html for each modal:

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

You should pull that type on click and use it to trigger the proper modal:

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

That way you're more specific about the modal you are triggering.

SAMPLE FIDDLE

To be honest though, the more efficient way of doing this is my using ajax to dynamically load a separate file with the corresponding info when you click. That way you would have just one modal script and swap out the info.

UPDATE

This is what I mean based off of your codePen:

CODEPEN

Answer 2

Instead of $(modal) use modal. everywhere

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');
});