Plusieurs fois, lorsque nous faisons le frontal, nous aurons une si petite fonctionnalité. . En supposant la scène suivante, un petit bouton, cliquez pour faire apparaître une boîte modulaire.
C'est aussi simple que cela, mais lorsque nous voulons cliquer sur la pièce vide, masquer la boîte modale, ajoutez l'ID du bouton: BTN, ID de boîte modale: modèle
Peut-être que notre idée la plus simple est d'écouter un événement directement sur le document.
Le bouton cliquez sur l'événement POP -Up à surveiller:
Copier le code du code comme suit:
$ ("#btn").
if (e.stoppropagation) {// doit arrêter de bouillonner
e.stoppropagation ();
} Autre {
e.cancelbubble = true;
}
})
Copier le code du code comme suit:
$ (documen) .bind ("cliquez", fonction (e) {
If (l'événement de clic n'est pas sur le modèle) {
Boîte modale cachée;
}
})
À première vue, il n'y a pas de problème, mais il y a en fait de nombreux problèmes. Lorsque nous avons encore de nombreux petits contrôles sur le cadre modal, il est difficile de juger le clic dans la boîte modale.
Ici, je pense qu'il y a la méthode la plus classique, ce qui est simple, mais très intelligent,
Tout d'abord, l'incident est le suivant du modèle du cadre modal:
Copier le code du code comme suit:
$ ("#Modal").
If (event && event.stoppropagation) {{
event.stoppropagation ();
} Autre {
event.cancelbubble = true;
}
});
Empêche simplement les clics dans la boîte de mode bouillonnant,
Alors:
Copier le code du code comme suit:
$ (documen) .one ("cliquez", fonction (e) {
var $ cible = $ (e.currentTarget);
if ($ cible.attr ("id")! = "modal") {{
$ ("#Modal").
}
});
Faites-le, si facile