Berkali -kali, ketika kami melakukan bagian depan, kami akan memiliki fitur kecil. . Dengan asumsi adegan berikut, tombol kecil, klik untuk memunculkan kotak modular.
Sederhana itu, tetapi ketika kami ingin mengklik bagian kosong, sembunyikan kotak modal, tambahkan ID tombol: BTN, ID Kotak Modal: Model
Mungkin ide kami yang paling sederhana adalah mendengarkan acara secara langsung di dokumen.
Tombol klik acara Pop -Up untuk memantau:
Salin kode kode sebagai berikut:
$ ("#btn").
if (e.stoppropagation) {// perlu berhenti menggelegak
e.Stoppropagation ();
} Kalau tidak {
e.cancelbubble = true;
}
})
Salin kode kode sebagai berikut:
$ (docume) .bind ("klik", function (e) {
If (acara klik tidak ada pada model) {
Kotak modal tersembunyi;
}
})
Pada pandangan pertama, tidak ada masalah, tetapi sebenarnya ada banyak masalah. Ketika kita masih memiliki banyak kontrol kecil pada bingkai modal, sulit untuk menilai klik di kotak modal.
Di sini, saya pikir ada metode paling klasik, yang sederhana, tetapi sangat pintar,
Pertama -tama, insiden ini adalah sebagai berikut pada model bingkai modal:
Salin kode kode sebagai berikut:
$ ("#Modal").
If (event && event.stoppropagation) {{
event.stoppropagation ();
} Kalau tidak {
event.cancelbubble = true;
}
});
Cukup mencegah klik di kotak mode menggelegak,
Kemudian:
Salin kode kode sebagai berikut:
$ (docume) .one ("klik", fungsi (e) {
var $ target = $ (e.currentTarget);
if ($ target.attr ("id")! = "modal") {{
$ ("#Modal").
}
});
Lakukan, sangat mudah