Wenn wir das Front -End machen, haben wir oft eine so kleine Funktion. . Unter der Annahme der folgenden Szene, eine kleine Schaltfläche, klicken Sie, um ein modulares Box aufzunehmen.
Es ist so einfach, aber wenn wir auf das leere Teil klicken möchten, verstecken Sie das Modalfeld, fügen Sie die Schaltflächen -ID hinzu: BTN, die modale Box -ID: Modell
Vielleicht ist unsere einfachste Idee, ein Ereignis direkt auf dem Dokument anzuhören.
Die Schaltfläche Klicken Sie auf das Pop -U -up -Ereignis, um zu überwachen:
Kopieren Sie den Code -Code wie folgt:
$ ("#BTN").
if (e.stoppropagation) {// muss aufhören zu sprudeln
E.Stoppropagation ();
} Anders {
e.cancelBubble = true;
}
})
Kopieren Sie den Code -Code wie folgt:
$ (docume) .bind ("click", function (e) {
If (das Klickereignis befindet sich nicht im Modell) {
Versteckte Modalbox;
}
})
Auf den ersten Blick gibt es kein Problem, aber es gibt tatsächlich viele Probleme. Wenn wir immer noch viele kleine Steuerelemente im Modal -Rahmen haben, ist es schwierig, den Klick in das Modalfeld zu beurteilen.
Hier denke ich, dass es die klassischste Methode gibt, die einfach, aber sehr klug ist.
Zunächst ist der Vorfall wie folgt im Modell des Modalrahmens wie folgt:
Kopieren Sie den Code -Code wie folgt:
$ ("#Modal").
If (event && event.stoppropagation) {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{
Event.StopPropagation ();
} Anders {
event.cancelBubble = true;
}
});
Verhindern Sie einfach die Klicks im Modusbox sprudeln.
Dann:
Kopieren Sie den Code -Code wie folgt:
$ (docume) .One ("click", function (e) {
var $ target = $ (e.currentTarget);
if ($ target.attr ("id")! = "modal") {{{{{
$ ("#Modal").
}
});
Mach es, so einfach