Pesan peringatan Bootstrap Twitter ditutup dan dibuka kembali

103

Saya punya masalah dengan pesan peringatan. Itu ditampilkan secara normal, dan saya dapat menutupnya ketika pengguna menekan x(tutup), tetapi ketika pengguna mencoba untuk menampilkannya lagi (misalnya, klik pada acara tombol) maka itu tidak ditampilkan. (Selain itu, jika saya mencetak pesan peringatan ini ke konsol, itu sama dengan [].) Kode saya ada di sini:

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

Dan acara:

 $(".alert").show();

PS! Saya perlu menampilkan pesan peringatan hanya setelah beberapa peristiwa terjadi (misalnya, tombol diklik). Atau apa yang saya lakukan salah?

ben3000
sumber

Jawaban:

180

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.

Henrik Karlsson
sumber
4
Hei! Mengenai jawaban Anda, lakukan dengan benar. Ini akan menyembunyikan SETIAP elemen yang memiliki kelas yang sama (yaitu, 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.
Alex Turpin
1
Itu benar, saya tidak berpikir untuk membuatnya bekerja seperti itu. Namun, itu akan menghilangkan kesederhanaan solusi ini sampai batas tertentu. Saya akan menambahkannya sebagai komentar ke kode yang ada. Terima kasih!
Henrik Karlsson
1
Baru untuk ini .. di mana Anda akan mendefinisikan '$ (function () {..'
S Rosam
1
Di mana saja dalam file JavaScript atau dalam kode <script> di sini </script>.
Henrik Karlsson
1
Jika Anda akan menggunakan $ (document) .on ('click', '[data-hide]', function () {/ * * /}) Jawaban Anda akan sempurna;)
shock_gone_wild
26

Saya baru saja menggunakan variabel model untuk menampilkan / menyembunyikan dialog dan menghapus data-dismiss="alert"

Contoh:

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

bekerja untuk saya dan menghentikan kebutuhan untuk pergi ke jquery

pengguna1661621
sumber
1
Solusi yang jauh lebih sederhana / lebih baik daripada jawaban yang diterima dengan suara terbanyak!
Abs
Solusi yang jauh lebih baik menurut saya
devqon
Saya suka ide Anda
Kumaresan Perumal
15

Saya pikir pendekatan yang baik untuk masalah ini adalah dengan memanfaatkan close.bs.alertjenis 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.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});
kimbaudi
sumber
5

Jika Anda menggunakan pustaka MVVM seperti knockout.js (yang sangat saya rekomendasikan), Anda dapat melakukannya dengan lebih bersih:

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

Ohad Schneider
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 ini
Leo
@Leo menonjol dengan cara apa?
Ohad Schneider
Obtrusive dalam segala hal. Anda secara aktif "menyematkan" perilaku ke struktur / markup html Anda. Bayangkan Anda harus mengubah perilaku itu ... berapa banyak halaman dan elemen html yang harus Anda ubah? Jangan salah paham, itu masih menjawab pertanyaan yang diajukan dan itulah mengapa saya tidak akan menurunkannya. Tapi ini jauh dari solusi yang "lebih bersih"
Leo
Tidak, yang sebenarnya saya katakan adalah menggunakan pemisahan perhatian . Tampilan Anda (html) tidak boleh berisi javascript apa pun, implikasi negatifnya bisa sangat besar dalam tim pengembang. Ini adalah pertanyaan (dan jawaban) yang bagus tentang Knockout dan data-bindatribut yang agak kontroversial stackoverflow.com/questions/13451414/unobtrusive-knockout
Leo
Apa yang Anda anggap sebagai "JavaScript"? Bagaimana jika itu hanya berisi nama metode yang akan dipanggil? Apakah fakta menyebutnya dengan parameter (false) yang membuatnya menonjol di mata Anda?
Ohad Schneider
2

Jadi 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

$(document).on("click", "[data-hide-closest]", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.closest($this.attr("data-hide-closest")).hide();
});
.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
  <a class="close" data-hide-closest=".alert">×</a>
  <strong>Success!</strong> Your entries were saved.
</div>

Joschi
sumber
2

Ini paling berhasil untuk saya:

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).hide();
});
Harshal Lonare
sumber
1

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.

Dave Sag
sumber
1

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:

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");
cfnerd
sumber
2
Apakah itu benar-benar dibutuhkan? jQuerys .hide function set display: none, bukankah seharusnya pembaca layar cukup pintar untuk mengenalinya sebagai tersembunyi?
Henrik Karlsson
1

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:

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

Perhatikan bahwa awalnya peringatan disembunyikan ( style="display: none;"), dan alih-alih standar data-dismiss="alert", kami telah menggunakannya di sini data-hide="alert".

Berikut JavaScript untuk menampilkan peringatan dan menimpa tombol tutup:

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

Jika Anda ingin menyembunyikan atau menampilkan peringatan secara terprogram di tempat lain dalam kode, lakukan saja myAlert.style.display = 'none';atau myAlert.style.display = 'block';.

Jaifroid
sumber
0

Masalahnya disebabkan oleh penggunaan style="display:none", Anda harus menyembunyikan peringatan dengan Javascript atau setidaknya saat menampilkannya, hapus atribut gaya.

Plamen Nikolov
sumber
2
Tidak juga, masalahnya adalah Penghapusan data menghapus elemen
Henrik Karlsson
0

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

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});
Charles Wyke-Smith
sumber
0

Saya telah mencoba semua metode dan cara terbaik bagi saya adalah dengan menggunakan kelas bootstrap bawaan .fadedan.in

Contoh:

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

Catatan: Di jQuery, addClass ('in') untuk menampilkan peringatan, removeClass ('in') untuk menyembunyikannya.

Fakta menyenangkan: Ini berfungsi untuk semua elemen. Bukan hanya peringatan.

gumpalan
sumber
0

Berikut ini adalah solusi yang didasarkan pada jawaban oleh Henrik Karlsson tapi dengan tepat peristiwa yang memicu (berdasarkan sumber Bootstrap ):

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

Jawabannya kebanyakan untuk saya, sebagai catatan.

maxkoryukov.dll
sumber
0

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

<div id="alert_container"></div>

JS

 $("#alert_container").html('<div id="alert"></div>');          
 $("#alert").addClass("alert alert-info  alert-dismissible");
 $("#alert").html('<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Info!</strong>message');
Lightning_young
sumber