jQuery - show/hide multiple modals

Question

How do I open either .modal using an id for each .button and a data-id for each modal?

If either .modal is open and I click the other .button, I want the modals to toggle (where the open one closes and the closed one opens).

$('.button').on('click', function() {
  $('.modal').toggleClass('active');
});
$(document).on("click", function(e) {
  if (($(".modal").hasClass("active")) && (!$(".modal, .modal *, .button").is(e.target))) {
    $(".modal").toggleClass("active");
  }
});
$(window).scroll(function() {
  $('.modal').removeClass('active');
});

.button {
  height: 30px;
}

.header {
  height: 15px;
  background: #eee;
}

.modal {
  position: fixed;
  top: 72px;
  right: 15px;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transform-origin: top right;
  transition: 0.15s;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.modal:after {
  content: "";
  width: 15px;
  height: 15px;
  background: inherit;
  position: absolute;
  background: #eee;
  top: -6px;
  right: 8px;
  opacity: 0;
  visibility: hidden;
  transform: rotate(45deg) scale(0.5);
  transition: 0.15s;
}

.modal.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.modal.active:after {
  opacity: 1;
  visibility: visible;
  transform: rotate(45deg) scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" />
<div class="modal" data-id="google">
  <div class="header">Google</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<div class="modal" data-id="apple">
  <div class="header">Google</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>

Answer 1

Change your code to this.

$('.button').on('click', function() {
    var b_id = $(this).attr("id");
    $('.modal').each(function(){
        if($(this).hasClass("active"))
            $(this).removeClass("active");
    });
    $("[data-id='"+b_id+"']").toggleClass('active');
});

$(document).on("click", function(e) {
    if (($(".modal").hasClass("active")) && (!$(".modal, .modal *, .button").is(e.target))) {
        $(".modal").removeClass("active");
    }
});

$(window).scroll(function() {
    $('.modal').removeClass('active');
});

Answer 2

You can compare the id of the button .prop('id') to the data-id of the modal .data('id') and toggle the .active class based on the equality of the values. You can accurately toggle the class by looping through the modals using $(.modal).each and utilizing the state parameter of the .toggleClass() function to hide all that don't match the button id and show the one that does match.

Your sample code seems to have two issues:

• a click on the html toggles the .active class on all modals so I switched that to removeClass.
• Both modals say Google so I switched the apple modal to say Apple.

$('.button').on('click', function() {
  const id = $(this).prop('id');
  $('.modal').each(function() {
    $(this).toggleClass('active', $(this).data('id') == id);
  });
});
$(document).on("click", function(e) {
  if (($(".modal").hasClass("active")) && (!$(".modal, .modal *, .button").is(e.target))) {
    $(".modal").removeClass("active");
  }
});
$(window).scroll(function() {
  $('.modal').removeClass('active');
});

.button {
  height: 30px;
  cursor: pointer;
}

.header {
  height: 15px;
  background: #eee;
}

.modal {
  position: fixed;
  top: 72px;
  right: 15px;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transform-origin: top right;
  transition: 0.15s;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.modal:after {
  content: "";
  width: 15px;
  height: 15px;
  background: inherit;
  position: absolute;
  background: #eee;
  top: -6px;
  right: 8px;
  opacity: 0;
  visibility: hidden;
  transform: rotate(45deg) scale(0.5);
  transition: 0.15s;
}

.modal.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.modal.active:after {
  opacity: 1;
  visibility: visible;
  transform: rotate(45deg) scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" />
<div class="modal" data-id="google">
  <div class="header">Google</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<div class="modal" data-id="apple">
  <div class="header">Apple</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>

Answer 3

What you can do is to change data-id to id and call it differently:

<div class="modal" id="googleModal">
  <div class="header">Google</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<div class="modal" id="appleModal">
  <div class="header">Apple</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>

Then in your script just get the id of your image and add class:

$('.button').on('click', function() {
    if($(this).attr('id') == 'google'){ 
       $('#googleModal').toggleClass('active'); 
       $('#appleModal').removeClass('active'); } 
    else if($(this).attr('id') == 'apple'){ 
       $('#appleModal').toggleClass('active'); 
       $('#googleModal').removeClass('active'); } 
});

Working fiddle