gato h
He usado este JavaScript a continuación:
$('body').click(function() {
if (!$(this.target).is('#popUpForm')) {
$(".modalDialog").hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="openModal" class="modalDialog">
<div class="modalClose">
<a href="#close" title="Close" class="close-circle" style="color:white; text-decoration:none; font-size:14px;"></a>
<div id="signup-header">
<h4>Request a brochure, with a free demo</h4>
<h5>Please Fill in the form below: </h5>
</div>
<form id="popUpForm" class="tryMeForm" name="" onsubmit="return formCheck(this);" method="post" action="">
<div class="InputGroup">
<input type="text" name="name" id="name" value="" placeholder="First Name*" />
</div>
<div class="InputGroup">
<input type="text" name="lastname" id="lastname" value="" placeholder="Last Name*" />
</div>
<div class="InputGroup">
<input type="text" name="Email" id="Email" value="" placeholder="Email Address*" />
</div>
<div class="InputGroup">
<input type="text" name="Phone" id="Phone" value="" placeholder="Phone Number*" />
</div>
<div class="InputGroup">
<textarea name="message" id="message" class="" placeholder="How we can help?"></textarea>
</div>
<div class="submit">
<input class="button_submit1 button-primary button1" type="submit" value="Submit" />
</div>
</form>
</div>
</div>
</body>Esto me permite cerrar el modal al hacer clic fuera de él. Sin embargo, se cierra incluso cuando hago clic en el interior también. ¿Cómo puedo hacer que se cierre solo en el exterior y en el botón de cerrar, pero no en el interior, para que los usuarios aún puedan ingresar sus datos?
Zakaria Acharki
Usar el nodo principal #openModal (recipiente) en lugar de #popUpForm (forma) :
$('body').click(function (event)
{
if(!$(event.target).closest('#openModal').length && !$(event.target).is('#openModal')) {
$(".modalDialog").hide();
}
});
-
esto funcionará si la longitud de los hijos del elemento
#openModales exactamente uno. En realidad, es un poco más complicado que simplemente verificar ele.target– Ryan
1 jun 2016 a las 16:20
-
Gracias @self por tu intervención, te vendría bien
closest()para cubrir la parte de niños/padres… (Actualizando mi respuesta).– Zakaria Acharki
1 de junio de 2016 a las 17:15
-
Descubrí que el complemento modal que uso, desarrollado por una patata, estaba usando
e.stopPropagation()para lograr el mismo objetivo, lo que inevitablemente evitó que los eventos se dispararan por cualquier cosa dentro del modal. Usé tu solución para arreglar lo que codificó la papa.– Martín James
4 de julio de 2018 a las 15:45
Agregando a esto para futuros lectores.
Otra forma de descartar el modal al hacer clic fuera implicó aprovechar la naturaleza burbujeante de los eventos de JavaScript.
En una estructura HTML modal típica
<body>
<div id="root">
-- Site content here
</div>
<div id="modal-root">
<div class="modal"></div>
</div>
</body>
haciendo clic en .modal hará que el evento de clic se propague así .modal -> #modal-root -> body mientras que hacer clic fuera del modal solo pasará #modal-root -> body.
Dado que podemos detener la propagación de los eventos de clic por completo, y si eso no interfiere con ningún otro código, solo necesitamos escuchar los eventos de clic en ambos .modal y #modal-root. Un clic de “raíz modal” descartará el modal, y un clic “modal” dejará de propagar el evento de clic para que nunca llegue a la “raíz modal”.
Para mayor claridad, aquí está el código que funciona en codepen.io: https://codepen.io/nbalaguer/pen/PVbEjm
-
Es un buen enfoque, aunque las cosas se complican si tiene algunos elementos en los que se puede hacer clic en el modelo (botón de envío, enlace a los términos y condiciones, etc.).
– Kout
23 ago. 2019 a las 13:00
-
@Kout todavía funciona porque los clics en los elementos internos no se ven afectados si coloca a su oyente en el elemento mismo.
– mjsarfatti
21/09/2019 a las 21:37
-
Agradable, pero no maneja los siguientes casos: – el mouse hacia abajo en el exterior y el mouse hacia arriba en el modal no deben cerrarse – el mouse hacia abajo en el modal y el mouse hacia arriba en el exterior no deben cerrarse
– Ybri
6 julio 2021 a las 15:00
Esto funciona para mí: tengo una imagen dentro de la ventana modal, por lo que si alguien hace clic fuera de la imagen (centrado):
código HTML:
<div id="modal_div"><img id="image_in_modal_div" src="https://stackoverflow.com/questions/37573608/image.jpg" /></div>
codigo cc:
#modal_div {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: transparent;
}
#image_in_modal_div {
left: 50%;
top: 30%;
position: absolute;
}
código mixto de jquery y javascript:
$( document ).ready(function() {
$("#element_that_opens_modal").click(function(){
$("#modal_div").show();
});
window.onclick = function(event) {
if (event.target.id != "image_in_modal_div") {
$("#modal_div").hide();
}
}
});
Este parecía ser el código que funcionó para mí al final:
$(document).click(function (e) {
if ($(e.target).is('#openModal')) {
$('#openModal').fadeOut(500);
}
});
$("#modalNo").click(function () {
$("#openModal").fadeOut(500);
});
$(".close").click(function () {
$("#openModal").fadeOut(500);
});
$(".close-circle").click(function () {
$("#openModal").fadeOut(500);
});
usman mahmood
Simple:
var images_modal = document.getElementById('images-model-div');
var videos_modal = document.getElementById('video-model-div');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == images_modal) {
images_modal.style.display = "none";
}
if (event.target == videos_modal) {
videos_modal.style.display = "none";
}
}
Ryan
Esta no es la forma más eficiente, pero funcionará. La idea es atravesar el árbol y verificar si el padre es la identificación del que no desea ocultar al hacer clic en cualquier lugar excepto en él.
$(document).on('click', function(e) {
var p = e.target;
while(p) {
console.log(p);
if(p.id) {
if(p.id == 'openModal') {
return;
}
}
p = p.parentElement;
}
$("#openModal").hide();
});
Abdalá
$('body').on('click', '.modal-open', function(e) {
$('.modal-background, .modal').show();
e.preventDefault();
})
.on('click', '.modal-close', function(e) {
$('.modal-background, .modal').hide();
e.preventDefault();
});
if ( !$('.modal-background.modal-close').length ) {
$('<div/>').addClass('modal-background modal-close').appendTo('body');
}body {
background: #ccc;
overflow-y: scroll;
padding: 15px;
}
button {
cursor: pointer;
}
.modal {
width: 400px;
margin: 5% auto 0 -200px;
padding: 10px;
background: #eee;
display: none;
position: absolute;
left: 50%;
top: 0;
z-index: 10;
}
.modal-background {
background: rgba(0, 0, 0, 0.5);
/* background: transparent; */
/* position: absolute; */
position: fixed;
z-index: 9; /* .modal[zIndex] - 1 */
bottom: 0;
right: 0;
left: 0;
top: 0;
display: none;
}<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button type="button" class="modal-open">Open modal</button>
<div class="modal">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>
<button type="button" onclick="$('.dummy-container').toggle()">Toggle something for testing</button>
<p>
<p class="dummy-container" style="display: none;">
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>
<button type="button" class="modal-close">Close modal</button>
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
tienes que comprobar el nodo padre
– Ryan
1 de junio de 2016 a las 16:02