ข้อความแจ้งเตือน Twitter Bootstrap ปิดแล้วเปิดอีกครั้ง

ฉันมีปัญหากับข้อความแจ้งเตือน มันแสดงขึ้นตามปกติและฉันสามารถปิดได้เมื่อผู้ใช้กดx(ปิด) แต่เมื่อผู้ใช้พยายามที่จะแสดงอีกครั้ง (เช่นคลิกที่เหตุการณ์ปุ่ม) มันจะไม่แสดง (ยิ่งไปกว่านั้นถ้าฉันพิมพ์ข้อความแจ้งเตือนนี้ไปที่คอนโซลมันจะเท่ากับ[]) รหัสของฉันอยู่ที่นี่:

 <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>

และเหตุการณ์:

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

ปล! ฉันต้องการแสดงข้อความแจ้งเตือนหลังจากเหตุการณ์บางอย่างเกิดขึ้นเท่านั้น (เช่นคลิกปุ่ม) หรือว่าฉันทำอะไรผิด?

การปิดข้อมูลจะลบองค์ประกอบอย่างสมบูรณ์ ใช้วิธี. hide () ของ jQuery แทน

วิธีแก้ไขด่วน:

ใช้ inline javascript เพื่อซ่อนองค์ประกอบ onclick ดังนี้:

<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/

อย่างไรก็ตามควรใช้เฉพาะในกรณีที่คุณขี้เกียจ (ซึ่งไม่ใช่เรื่องดีหากคุณต้องการแอปที่ดูแลรักษาได้)

วิธีการทำอย่างถูกต้อง:

สร้างแอตทริบิวต์ข้อมูลใหม่สำหรับซ่อนองค์ประกอบ

Javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

จากนั้นเปลี่ยนการปิดข้อมูลเป็นการซ่อนข้อมูลในมาร์กอัป ตัวอย่างที่ jsfiddle

$("." + $(this).attr("data-hide")).hide()

สิ่งนี้จะซ่อนองค์ประกอบทั้งหมดที่มีคลาสที่ระบุไว้ใน data-hide กล่าวคือdata-hide="alert"จะซ่อนองค์ประกอบทั้งหมดด้วยคลาสการแจ้งเตือน

Xeon06ให้ทางเลือกอื่น:

$(this).closest("." + $(this).attr("data-hide")).hide()

สิ่งนี้จะซ่อนเฉพาะองค์ประกอบหลักที่ใกล้เคียงที่สุด สิ่งนี้มีประโยชน์มากหากคุณไม่ต้องการให้การแจ้งเตือนแต่ละคลาสไม่ซ้ำกัน อย่างไรก็ตามโปรดทราบว่าคุณต้องวางปุ่มปิดไว้ในการแจ้งเตือน

คำจำกัดความของ. closest จากjquery doc :

สำหรับแต่ละองค์ประกอบในชุดให้รับองค์ประกอบแรกที่ตรงกับตัวเลือกโดยการทดสอบองค์ประกอบเองและสำรวจผ่านบรรพบุรุษของมันในโครงสร้าง DOM

ฉันเพิ่งใช้ตัวแปร model เพื่อแสดง / ซ่อนกล่องโต้ตอบและลบไฟล์ data-dismiss="alert"

ตัวอย่าง:

<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>

ได้ผลสำหรับฉันและหยุดความต้องการที่จะออกไปที่ jquery

ฉันคิดว่าแนวทางที่ดีในการแก้ปัญหานี้คือการใช้ประโยชน์จากclose.bs.alertประเภทเหตุการณ์ของ Bootstrap เพื่อซ่อนการแจ้งเตือนแทนที่จะลบออก สาเหตุที่ Bootstrap เปิดเผยเหตุการณ์ประเภทนี้เพื่อให้คุณสามารถเขียนทับพฤติกรรมเริ่มต้นของการลบการแจ้งเตือนออกจาก DOM

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

หากคุณใช้ไลบรารี MVVM เช่น knockout.js (ซึ่งฉันขอแนะนำเป็นอย่างยิ่ง) คุณสามารถทำได้อย่างหมดจดมากขึ้น:

<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/

ดังนั้นหากคุณต้องการโซลูชันที่สามารถรับมือกับเพจ html แบบไดนามิกดังที่คุณได้รวมไว้แล้วคุณควรใช้ jQuery's live เพื่อตั้งค่าตัวจัดการกับองค์ประกอบทั้งหมดที่มีอยู่ในขณะนี้และในอนาคตในโดมหรือถูกลบออก

ฉันใช้

$(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>

สิ่งนี้เหมาะกับฉันที่สุด:

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

ฉันพบปัญหานี้เช่นกันและปัญหาในการแฮ็กปุ่มปิดก็คือฉันยังต้องการเข้าถึงเหตุการณ์การแจ้งเตือนการปิด bootstrap มาตรฐาน

วิธีแก้ปัญหาของฉันคือการเขียนปลั๊กอิน jquery ขนาดเล็กที่ปรับแต่งได้ซึ่งจะฉีดการแจ้งเตือน Bootstrap 3 ที่สร้างขึ้นอย่างถูกต้อง (มีหรือไม่มีปุ่มปิดตามที่คุณต้องการ) โดยไม่ยุ่งยากและช่วยให้คุณสร้างใหม่ได้อย่างง่ายดายหลังจากปิดกล่อง

ดูhttps://github.com/davesag/jquery-bs3Alertสำหรับการใช้งานการทดสอบและตัวอย่าง

ฉันเห็นด้วยกับคำตอบที่โพสต์โดย Henrik Karlsson และแก้ไขโดย Martin Prikryl ฉันมีคำแนะนำหนึ่งข้อโดยพิจารณาจากการช่วยสำหรับการเข้าถึง ฉันจะเพิ่ม. attr ("aria-hidden", "true") ต่อท้ายเพื่อให้ดูเหมือนว่า:

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");

โซลูชันข้างต้นทั้งหมดใช้ไลบรารีภายนอกทั้งเชิงมุมหรือ jQuery และ Bootstrap เวอร์ชันเก่า ดังนั้นนี่คือทางออกที่ชาร์ลส์ Wyke สมิ ธ ในJavaScript บริสุทธิ์นำไปใช้กับเงินทุน 4 ใช่ Bootstrap ต้องการ jQuery สำหรับโมดอลและโค้ดการแจ้งเตือนของตัวเอง แต่ไม่ใช่ทุกคนที่จะเขียนโค้ดของตนเองด้วย jQuery อีกต่อไป

นี่คือ html ของการแจ้งเตือน:

<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>

โปรดทราบว่าการแจ้งเตือนครั้งแรกจะถูกซ่อน ( style="display: none;") และแทนของมาตรฐานที่เราได้ใช้ที่นี่data-dismiss="alert"data-hide="alert"

นี่คือ JavaScript เพื่อแสดงการแจ้งเตือนและแทนที่ปุ่มปิด:

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

หากคุณต้องการซ่อนหรือแสดงการแจ้งเตือนทางโปรแกรมอื่น ๆ ในรหัสเพียงทำ หรือmyAlert.style.display = 'none';myAlert.style.display = 'block';

ปัญหาเกิดจากการใช้style="display:none"คุณควรซ่อนการแจ้งเตือนด้วย Javascript หรืออย่างน้อยที่สุดเมื่อแสดงให้ลบแอตทริบิวต์ style

จากคำตอบอื่น ๆ และการเปลี่ยนการปิดข้อมูลเป็นการซ่อนข้อมูลตัวอย่างนี้จะจัดการกับการเปิดการแจ้งเตือนจากลิงก์และอนุญาตให้เปิดและปิดการแจ้งเตือนซ้ำ ๆ

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

ฉันได้ลองทุกวิธีแล้ววิธีที่ดีที่สุดสำหรับฉันคือการใช้คลาส bootstrap ในตัว .fadeและ.in

ตัวอย่าง:

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

หมายเหตุ: ใน jQuery ให้ addClass ('in') เพื่อแสดงการแจ้งเตือน removeClass ('in') เพื่อซ่อน

ข้อเท็จจริงที่น่าสนใจ: ใช้ได้กับทุกองค์ประกอบ ไม่ใช่แค่การแจ้งเตือน

นี่คือวิธีแก้ปัญหาตามคำตอบของHenrik Karlssonแต่มีการกระตุ้นเหตุการณ์ที่เหมาะสม(ขึ้นอยู่กับแหล่งที่มาของ 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'))
    })
});

คำตอบส่วนใหญ่สำหรับฉันเป็นหมายเหตุ

ไม่สามารถทำได้ง่ายๆโดยการเพิ่ม div "container" เพิ่มเติมและเพิ่ม div การแจ้งเตือนที่ถูกลบกลับเข้าไปในแต่ละครั้ง ดูเหมือนว่าจะทำงานให้ฉัน?

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