Muchas veces, cuando hacemos la parte delantera, tendremos una característica tan pequeña. . Suponiendo la siguiente escena, un botón pequeño, haga clic para aparecer en un cuadro modular.
Es así de simple, pero cuando queremos hacer clic en la parte en blanco, esconde el cuadro modal, agregue la ID de botón: BTN, el ID de caja modal: Modelo
Tal vez nuestra idea más simple es escuchar un evento directamente en el documento.
El botón Haga clic en el evento pop -Up para monitorear:
Copiar código del código de la siguiente manera:
$ ("#BTN").
if (e.stoppropagation) {// necesito dejar de burbujear
E.stoppropagation ();
} Demás {
E.CancelBubble = True;
}
})
Copiar código del código de la siguiente manera:
$ (DOCUME) .Bind ("Haga clic", función (E) {
If (el evento de clic no está en el modelo) {
Caja modal oculta;
}
})
A primera vista, no hay problema, pero en realidad hay muchos problemas. Cuando todavía tenemos muchos controles pequeños en el marco modal, es difícil juzgar el clic en el cuadro modal.
Aquí, creo que existe el método más clásico, que es simple, pero muy inteligente,
En primer lugar, el incidente es el siguiente en el modelo del marco modal:
Copiar código del código de la siguiente manera:
$ ("#Modal").
If (event && event.stoppropagation) {{
event.stopPropagation ();
} Demás {
event.cancelBubble = true;
}
});
Simplemente evite los clics en el cuadro de modo burbujeo,
Entonces:
Copiar código del código de la siguiente manera:
$ (Docume) .One ("Haga clic", función (E) {
var $ Target = $ (E.CurrentTarget);
if ($ target.attr ("id")! = "modal") {{
$ ("#Modal").
}
});
Hazlo, tan fácil