Muitas vezes, quando fizermos o front -end, teremos um recurso tão pequeno. . Supondo que a cena a seguir, um botão pequeno, clique para exibir uma caixa modular.
É simples assim, mas quando queremos clicar na parte em branco, ocultar a caixa modal, adicione o botão ID: btn, o ID da caixa modal: modelo
Talvez nossa idéia mais simples seja ouvir um evento diretamente no documento.
O botão Clique no evento pop -up para monitorar:
Copie o código do código da seguinte forma:
$ ("#BTN").
se (e.stoppropagation) {// precisa parar de borbulhar
E.StopPropagation ();
} Outro {
e.cancelbubble = true;
}
})
Copie o código do código da seguinte forma:
$ (docume) .bind ("clique", função (e) {
Se (o evento de clique não estiver no modelo) {
Caixa modal oculta;
}
})
À primeira vista, não há problema, mas na verdade há muitos problemas. Quando ainda temos muitos pequenos controles no quadro modal, é difícil julgar o clique na caixa modal.
Aqui, acho que existe o método mais clássico, que é simples, mas muito inteligente,
Primeiro de tudo, o incidente é o seguinte no modelo do quadro modal:
Copie o código do código da seguinte forma:
$ ("#Modal").
If (event && event.stopPropagation) {{
event.stopPropagation ();
} Outro {
event.cancelbubble = true;
}
});
Basta impedir os cliques na caixa de modo borbulhando,
Então:
Copie o código do código da seguinte forma:
$ (docume) .One ("clique", função (e) {
var $ Target = $ (E.CurrentTarget);
if ($ target.attr ("id")! = "modal") {{{
$ ("#Modal").
}
});
Faça isso, tão fácil