Cómo ocultar un popup / div utilizando Javascript?

25 Jul, 2023 Programación 0

Estoy construyendo un menú de configuración para mi sitio que aparecerá como una ventana emergente. Actualmente, puedo abrir/cerrar esta ventana emergente haciendo clic en el botón vinculado a ella. Sin embargo, me gustaría implementar una forma de cerrar esta ventana emergente simplemente haciendo clic fuera de la misma.

Creo que JavaScript puede completar esta acción, desafortunadamente, aún no estoy familiarizado con el uso de este lenguaje.

¿Alguien tiene una solución que satisfaga mis necesidades? Esto es con lo que estoy trabajando…

Gracias de antemano 🙂

var settingsmenu = document.querySelector(".settings-menu");

function settingsMenuToggle(){
    settingsmenu.classList.toggle("settings-menu-height");
}

.settings-menu{
  position: absolute;
  width: 90%;
  max-width: 350px;
  background: var(--color-light);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
  top: 84px;
  right: 9%;
  max-height: 0;
  transition: max-height 0.3s;
}

.settings-menu-height{
  max-height: 300px;
}

.settings-menu-inner{
  padding: 20px;
}

<div class="create">
    <figure onclick="settingsMenuToggle()">
      <button>Abrir Ventana Emergente</button>
    </figure>
</div>

<div class="settings-menu">
  <div class="settings-menu-inner">
    <figure>
      <img src="https://images.macrumors.com/t/Y_7ongT7QQ-k0uYwUE4uCoCO3TI=/800x0/article-new/2019/08/apple-settings-icon-19.jpg-250x250.jpg?lossy" width="100" height="100">
      <h3>Esto es una ventana emergente</h3>
    </figure>
  </div>
</div>

// Selecciona el menú de configuración y el botón que lo abre var settingsmenu = document.querySelector(".settings-menu"); var openbtn = document.querySelector(".create button"); // Función para alternar el menú de configuración function settingsMenuToggle() { settingsmenu.classList.toggle("settings-menu-height"); } // Agrega un listener de eventos de clic al objeto document document.addEventListener("click", function(event) { var isClickInside = settingsmenu.contains(event.target) || openbtn.contains(event.target); if (!isClickInside && settingsmenu.classList.contains("settings-menu-height")) { // Si el clic está fuera del menú de configuración y el menú está abierto, cierra el menú settingsMenuToggle(); } });

Answer

davy.ai

July 25, 2023 at 9:34 am
Para implementar una forma de cerrar el popup/div haciendo clic fuera de él, puedes agregar un listener de eventos al objeto document que compruebe si se hizo clic fuera del menú de configuración. Aquí tienes un ejemplo utilizando Javascript:
```
// Selecciona el menú de configuración y el botón que lo abre
var settingsmenu = document.querySelector(".settings-menu");
var openbtn = document.querySelector(".create button");

// Función para alternar el menú de configuración
function settingsMenuToggle() {
    settingsmenu.classList.toggle("settings-menu-height");
}

// Agrega un listener de eventos de clic al objeto document
document.addEventListener("click", function(event) {
    var isClickInside = settingsmenu.contains(event.target) || openbtn.contains(event.target);
    if (!isClickInside && settingsmenu.classList.contains("settings-menu-height")) {
        // Si el clic está fuera del menú de configuración y el menú está abierto, cierra el menú
        settingsMenuToggle();
    }
});
```
Este código comprueba si el objetivo del clic está dentro del menú de configuración o el botón de abrir. Si no lo está y el menú está abierto, cambia el estado del menú para cerrarlo.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Answer

davy.ai