时间戳

首页 > 解决方案 > 如何使用 .removeclass 或 .toggleclass 关闭所有弹出窗口

javascript - 如何使用 .removeclass 或 .toggleclass 关闭所有弹出窗口

问题描述

如果它正在显示，我希望能够关闭 myPopup2 div，反之亦然。现在，如果我先单击 myPopup2 Div 然后单击 myPopup1 div 第二个它会在下面，我需要 myPopup2 div 关闭。

** 打开弹出窗口 1 的功能应该在弹出窗口 2 显示时关闭它，反之亦然

CodePen：https ://codepen.io/shopmaster/pen/ZEWxrVx

我试过这个

function myFunction1() {
  var popup = document.getElementById("myPopup1");
  popup.classList.toggle("show"); 
  
  if ( document.getElementById("myPopup2").classList.contains("show"))
  myFunction2();
  
}

但这没有用。有什么建议么？

我有以下CSS

/* Popup container - can be anything you want */
.popup {
   position: fixed; 
  top: 70%;
  left: 40%;
  z-index: 1;
  margin: -25px 0 0 -25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 500px;
  height: 350px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 10px;
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left:50%;
  margin-left: -80px;
}

/* Popup arrow */


/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible; 
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

我的 HTML 看起来像这样

<!-- DIV  POPUP #1 -->
<div class="popup">
  <span class="popuptext" id="myPopup1">
  <span onclick="myFunction1()"
      class="w3-button w3-display-topright">&times;</span>
  <b>1. Fiscal Target and Rules:<br> Does the government have fiscal institutions to support fiscal sustainability and to facilitate medium-term planning for public investment?</b>
  <br><br>
  <p>1.a. Is there a target or limit for government to ensure debt sustainability?</p>
  <p>1.b. Is fiscal policy guided by one or more permanent fiscal rules?</p>
  <p>1.c. Is there a medium-term fiscal framework (MTFF) to align budget preparation with fiscal policy?</p>
  
  </span>
</div>

<!-- DIV  POPUP #2 -->
<div class="popup">
  <span class="popuptext" id="myPopup2">
  <span onclick="myFunction2()"
      class="w3-button w3-display-topright">&times;</span>
  <b>2. Fiscal Target and Rules: Does the government have fiscal institutions to support fiscal sustainability and to facilitate medium-term planning for public investment?</b>
  <br><br>
  <p>1.a. Is there a target or limit for government to ensure debt sustainability?</p>
  <p>1.b. Is fiscal policy guided by one or more permanent fiscal rules?</p>
  <p>1.c. Is there a medium-term fiscal framework (MTFF) to align budget preparation with fiscal policy?</p>
  
  </span>
</div>

我的 Javascript 看起来像这样：

<script>
// When the user clicks on <div>, open the popup
function myFunction1() {
  var popup = document.getElementById("myPopup1");
  popup.classList.toggle("show"); 
  
 
}
function myFunction2() {
  var popup = document.getElementById("myPopup2");
  popup.classList.toggle("show");
}
</script>

标签： javascripthtmlcss

解决方案

我会给你另一种方法来处理这些弹出窗口。我已经评论了代码。如果不清楚，请添加评论。

这样你就可以在不改变 js 的情况下添加许多弹出窗口。

PS：请注意，我已经更改了一些 CSS 以使代码段正常工作。此外，更改了一些 HTML 以实现多个弹出窗口的想法，这将非常适合您在此饼图中有许多弹出窗口的情况。

const popups = document.querySelectorAll('.popup');
const buttons = document.querySelectorAll('.js-toggle-modal');
const closeButtons = document.querySelectorAll('.js-modal-close');

const closeModals = () => {
  // Iterate through all popups and remove class show
  popups.forEach(popup => {
    popup.classList.remove('show');
  })
}

closeButtons.forEach(button => {
  // Close all popups on close button click
  button.addEventListener('click', function(e) {
    e.preventDefault();

    closeModals();
  })
});

buttons.forEach(button => {
  // Cache target of each button
  const target = document.querySelector(button.getAttribute('data-target'));

  button.addEventListener('click', function(e) {
    e.preventDefault();

    // Hide all active popups
    closeModals();

    // Show current target popup
    target.classList.add('show');
  });
});
/* Popup container - can be anything you want */

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}


/* The actual popup */

.popup .popup__text {
  width: 500px;
  height: 350px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 10px;
}


/* Toggle this class - hide and show the popup */

.popup.show {
  visibility: visible;
  opacity: 1;
}
<button class="btn js-toggle-modal" data-target="#popup1">Open popup1</button>
<button class="btn js-toggle-modal" data-target="#popup2">Open popup2</button>

<div class="popup" id="popup1">
  <div class="popup__text">
    <button class="popup__close js-modal-close" data-target="#popup2">&times;</button>

    <b>1. Fiscal Target and Rules:<br> Does the government have fiscal institutions to support fiscal sustainability and to facilitate medium-term planning for public investment?</b>
    <br><br>
    <p>1.a. Is there a target or limit for government to ensure debt sustainability?</p>
    <p>1.b. Is fiscal policy guided by one or more permanent fiscal rules?</p>
    <p>1.c. Is there a medium-term fiscal framework (MTFF) to align budget preparation with fiscal policy?</p>
  </div>
</div>

<div class="popup" id="popup2">
  <div class="popup__text">
    <button class="popup__close js-modal-close" data-target="#popup2">&times;</button>

    <b>2. Fiscal Target and Rules: Does the government have fiscal institutions to support fiscal sustainability and to facilitate medium-term planning for public investment?</b>
    <br><br>
    <p>1.a. Is there a target or limit for government to ensure debt sustainability?</p>
    <p>1.b. Is fiscal policy guided by one or more permanent fiscal rules?</p>
    <p>1.c. Is there a medium-term fiscal framework (MTFF) to align budget preparation with fiscal policy?</p>
  </div>
</div>

推荐阅读