Pesan peringatan Bootstrap Twitter ditutup dan dibuka kembali

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?

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.

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

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');
});

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/

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>

Ini paling berhasil untuk saya:

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

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.

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");

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';.

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

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 */
   });
});

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.

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.

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');