Este código muestra una ventana emergente. Quiero que esta ventana emergente desaparezca cuando hacemos clic en cualquier lugar de la pantalla, excepto dentro del área emergente. Intenté muchas cosas pero los resultados no fueron los esperados. ¿Alguien me puede ayudar con esto? ¿Puedo usar la función a través de jQuery de esa manera podría llamar a la página de inicio, es decir, "a href =" # "?

#container2 {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  visibility: hidden;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  /* complimenting your modal colors */
}

#container2:target {
  visibility: visible;
  display: block;
}

.reveal-modal {
  position: absolute;
  height: 350px;
  background: #0baa16;
  width: 450px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div id="container">
  <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
  </div>
</div>
-1
piyush chaudhary 28 abr. 2020 a las 13:08

3 respuestas

Puede agregar un detector de eventos en todo su documento que oculte su contenedor. Debido a que el contenedor es parte de su documento, entonces debe detener un clic en ese contenedor para aparecer y activar el evento en su documento.

$(document).on('click', function(){
	$('#exampleModal').hide();
});

$('#exampleModal').on('click', function(e){
	e.stopPropagation();
});
.reveal-modal {
    position: absolute;
    height:350px;
background:#0baa16;
    width:450px;
    left:50%;
    top: 50%;
    transform:translate(-50%,-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="exampleModal" class="reveal-modal">
    
</div>
1
Lapskaus 28 abr. 2020 a las 10:37

Puede documentar el evento de clic para esto usando jQuery, verifique el siguiente código:

$(document).click(function(e){
    el = e.target;
    if ($(el).attr("id") != "exampleModal" && !$(el).parents('#exampleModal').length){
        $('#exampleModal').hide();
    }
});
#container2 {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  visibility: hidden;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  /* complimenting your modal colors */
}

#container2:target {
  visibility: visible;
  display: block;
}

.reveal-modal {
  position: absolute;
  height: 350px;
  background: #0baa16;
  width: 450px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="container">
  <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
  </div>
</div>

Puede ser que esto te ayude.

0
Bhavik Hirani 28 abr. 2020 a las 10:45

Modifiqué su código y construí un ejemplo de que puede cerrar su "ventana emergente".

La idea básica para cerrar el modal es probar si el mouse está sobre el elemento o no.

$(document).ready(function(){
  $('body').click(function(){
    if(!$('#exampleModal').is(':hover'))
      $('#exampleModal').hide();
  });
});
#container {
  background:red;
  width:100%;
  height:2000px;
}

.reveal-modal {
  position: fixed;
  height: 350px;
  background: #0baa16;
  width: 450px;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="exampleModal" class="reveal-modal">
  </div>
</div>
0
Cristian V 28 abr. 2020 a las 10:40