Penghapusan data sepenuhnya menghapus elemen. Gunakan metode .hide () jQuery sebagai gantinya.
Metode perbaiki-cepat:
Menggunakan javascript sebaris untuk menyembunyikan elemen onclick seperti ini:
<div class="alert" style="display: none">
<a class="close" onclick="$('.alert').hide()">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<a href="#" onclick="$('alert').show()">show</a>
http://jsfiddle.net/cQNFL/
Namun ini hanya boleh digunakan jika Anda malas (yang tidak baik jika Anda menginginkan aplikasi yang dapat dipelihara).
Metode lakukan dengan benar:
Buat atribut data baru untuk menyembunyikan elemen.
Javascript:
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide()
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide()
})
})
lalu ubah data-tutup menjadi data-hide di markup. Contoh di jsfiddle .
$("." + $(this).attr("data-hide")).hide()
Ini akan menyembunyikan semua elemen dengan kelas yang ditentukan dalam data-hide, yaitu: data-hide="alert"
akan menyembunyikan semua elemen dengan kelas peringatan.
Xeon06 memberikan solusi alternatif:
$(this).closest("." + $(this).attr("data-hide")).hide()
Ini hanya akan menyembunyikan elemen induk terdekat. Ini sangat berguna jika Anda tidak ingin memberi setiap lansiran kelas yang unik. Harap dicatat bahwa, bagaimanapun, Anda perlu menempatkan tombol tutup di dalam peringatan.
Definisi .closest dari jquery doc :
Untuk setiap elemen dalam set, dapatkan elemen pertama yang cocok dengan selektor dengan menguji elemen itu sendiri dan menelusuri leluhurnya di pohon DOM.
alert
) pada halaman. Solusi untuk hal ini adalah mengganti konten callback dengan baris ini$(this).closest("." + $(this).attr("data-hide")).hide();
, yang hanya akan memengaruhi elemen induk terdekat, mengingat tombol tutup biasanya ditempatkan dalam peringatan yang terpengaruh.Saya baru saja menggunakan variabel model untuk menampilkan / menyembunyikan dialog dan menghapus
data-dismiss="alert"
Contoh:
bekerja untuk saya dan menghentikan kebutuhan untuk pergi ke jquery
sumber
Saya pikir pendekatan yang baik untuk masalah ini adalah dengan memanfaatkan
close.bs.alert
jenis acara Bootstrap untuk menyembunyikan peringatan daripada menghapusnya. Alasan mengapa Bootstrap mengekspos jenis peristiwa ini adalah agar Anda dapat menimpa perilaku default menghapus peringatan dari DOM.sumber
Jika Anda menggunakan pustaka MVVM seperti knockout.js (yang sangat saya rekomendasikan), Anda dapat melakukannya dengan lebih bersih:
http://jsfiddle.net/bce9gsav/5/
sumber
data-bind="click:function(){showAlert(false);}
adalah contoh sempurna dari javascript yang menonjol yang jauh dari kata bersih . Saya sangat menyarankan untuk TIDAK mengikuti pendekatan inidata-bind
atribut yang agak kontroversial stackoverflow.com/questions/13451414/unobtrusive-knockoutJadi jika Anda menginginkan solusi yang dapat mengatasi halaman html dinamis, karena Anda sudah memasukkannya, Anda harus menggunakan jQuery's live untuk mengatur penangan pada semua elemen yang sekarang dan di masa mendatang di dom atau dihapus.
saya menggunakan
sumber
Ini paling berhasil untuk saya:
sumber
Saya mengalami masalah ini juga dan masalah hanya dengan meretas tombol tutup adalah bahwa saya masih memerlukan akses ke acara peringatan-tutup bootstrap standar.
Solusi saya adalah menulis plugin jquery kecil, dapat disesuaikan, yang menyuntikkan peringatan Bootstrap 3 yang terbentuk dengan benar (dengan atau tanpa tombol tutup saat Anda membutuhkannya) dengan sedikit keributan dan memungkinkan Anda untuk dengan mudah membuat ulang setelah kotak ditutup.
Lihat https://github.com/davesag/jquery-bs3Alert untuk penggunaan, tes, dan contoh.
sumber
Saya setuju dengan jawaban yang diposting oleh Henrik Karlsson dan diedit oleh Martin Prikryl. Saya punya satu saran, berdasarkan aksesibilitas. Saya akan menambahkan .attr ("aria-hidden", "true") di akhir, sehingga terlihat seperti:
sumber
Semua solusi di atas menggunakan pustaka eksternal, baik angular atau jQuery, dan Bootstrap versi lama. Jadi, inilah solusi Charles Wyke-Smith dalam JavaScript murni , yang diterapkan pada Bootstrap 4 . Ya, Bootstrap membutuhkan jQuery untuk modal dan kode peringatannya sendiri, tetapi tidak semua orang menulis kode mereka sendiri dengan jQuery lagi.
Berikut adalah html peringatan tersebut:
Perhatikan bahwa awalnya peringatan disembunyikan (
style="display: none;"
), dan alih-alih standardata-dismiss="alert"
, kami telah menggunakannya di sinidata-hide="alert"
.Berikut JavaScript untuk menampilkan peringatan dan menimpa tombol tutup:
Jika Anda ingin menyembunyikan atau menampilkan peringatan secara terprogram di tempat lain dalam kode, lakukan saja
myAlert.style.display = 'none';
ataumyAlert.style.display = 'block';
.sumber
Masalahnya disebabkan oleh penggunaan
style="display:none"
, Anda harus menyembunyikan peringatan dengan Javascript atau setidaknya saat menampilkannya, hapus atribut gaya.sumber
Berdasarkan jawaban lain dan mengubah data-tutup menjadi data-hide, contoh ini menangani pembukaan pemberitahuan dari tautan dan memungkinkan pemberitahuan dibuka dan ditutup berulang kali
sumber
Saya telah mencoba semua metode dan cara terbaik bagi saya adalah dengan menggunakan kelas bootstrap bawaan
.fade
dan.in
Contoh:
Catatan: Di jQuery, addClass ('in') untuk menampilkan peringatan, removeClass ('in') untuk menyembunyikannya.
Fakta menyenangkan: Ini berfungsi untuk semua elemen. Bukan hanya peringatan.
sumber
Berikut ini adalah solusi yang didasarkan pada jawaban oleh Henrik Karlsson tapi dengan tepat peristiwa yang memicu (berdasarkan sumber Bootstrap ):
Jawabannya kebanyakan untuk saya, sebagai catatan.
sumber
Apakah ini tidak dapat dilakukan hanya dengan menambahkan div "container" tambahan dan menambahkan div peringatan yang telah dihapus kembali ke dalamnya setiap kali. Sepertinya berhasil untuk saya?
HTML
JS
sumber