jQuery-显示/隐藏多个模态

Question

如何使用每个.modal的{​​{1}}和每个模态的id打开.button？

如果data-id中的一个处于打开状态，而我单击了另一个.modal，则希望模态进行切换（打开的模式将关闭，闭合的模式将打开）。

.button

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

Answer 1

您可以做的是将data-id更改为id并以不同的方式调用它：

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

然后在脚本中获取图像的ID并添加类：

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

工作fiddle

Answer 2

您可以将按钮.prop('id')的ID与模式.data('id')的数据ID进行比较，并根据值的相等性切换.active类。您可以通过使用$(.modal).each遍历模态并利用.toggleClass()函数的状态参数来隐藏所有不匹配按钮ID并显示确实匹配的按钮，从而准确地切换类。 / p>

您的示例代码似乎有两个问题：

• 单击html可以在所有模式上切换.active类，因此我将其切换为removeClass。
• 两个模态都说谷歌，所以我把苹果模态改为了苹果。

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

将代码更改为此。

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