Закройте всплывающее окно, щелкнув за его пределами javascript - PullRequest
Новая
       130

Закройте всплывающее окно, щелкнув за его пределами javascript

1 голос
/ 09 июля 2020

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

Я пробовал добавить invisibleDiv в соответствии с этим сообщением Закройте всплывающий div, щелкнув снаружи из него , но всплывающее окно все еще перемещается только при нажатии самой кнопки.

https://www.w3schools.com/howto/howto_js_popup.asp

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
    /* Popup container - can be anything you want */
    .popup {
      position: relative;
      display: inline-block;
      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: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -80px;
    }
    
    /* Popup arrow */
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    /* Toggle this class - hide and show the popup */
    .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
    }
    
    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
      from {opacity: 0;} 
      to {opacity: 1;}
    }
    
    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
    }
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body style="text-align:center">
    <h2>Popup</h2>
    <div class="popup" onclick="myFunction()">Click me to toggle the popup!
      <span class="popuptext" id="myPopup">A Simple Popup!</span>
    </div>
  </body>
</html>

Ответы [ 2 ]

2 голосов
/ 09 июля 2020

Наличие глобального обработчика кликов, который проверяет classList выбранного элемента, является одним из способов закрыть всплывающее окно при нажатии вне его. Вот пример: 

const popups = [...document.getElementsByClassName('popup')];

window.addEventListener('click', ({ target }) => {
  const popup = target.closest('.popup');
  const clickedOnClosedPopup = popup && !popup.classList.contains('show');
  
  popups.forEach(p => p.classList.remove('show'));
  
  if (clickedOnClosedPopup) popup.classList.add('show');  
});
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  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: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

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

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
<h2>Popup</h2>

<div class="popup">Click me to toggle the popup!
  <span class="popuptext">A Simple Popup!</span>
</div>

<div class="popup">Click me to toggle the popup!
  <span class="popuptext">A Simple Popup!</span>
</div>
0 голосов
/ 09 июля 2020

Добавьте onclick в контейнер всплывающего окна и остановите распространение события на всех внутренних элементах, которые вы не хотите запускать. 

let popup = document.querySelector(".popup");

function toggle(e) {
  e.stopPropagation();
  popup.classList.toggle("hide");
}

function closePopup() {

  if (!popup.classList.contains("hide")) {
    popup.classList.toggle("hide");
  }
}
body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background: lightgray;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup {
  width: 100px;
  height: 100px;
  background: white;
  margin: 0 auto;
}

button {
  position: fixed;
  top: 0;
}

.hide {
  display: none;
}
<div class="container" onclick="closePopup()">
  <div class="popup hide" onclick="event.stopPropagation()"> </div>
  <Button onclick="toggle(event)">Toggle</Button>
</div>
...