วิธีปิดการแจ้งเตือนโดยอัตโนมัติโดยใช้ Twitter Bootstrap


90

ฉันใช้เฟรมเวิร์ก CSS bootstrap ของ twitter (ซึ่งยอดเยี่ยมมาก) สำหรับบางข้อความถึงผู้ใช้ฉันกำลังแสดงข้อความโดยใช้การแจ้งเตือน Javascript JS และ CSS

สำหรับผู้ที่สนใจสามารถดูได้ที่นี่: http://getbootstrap.com/javascript/#alerts

ปัญหาของฉันคือสิ่งนี้ หลังจากที่ฉันแสดงการแจ้งเตือนให้กับผู้ใช้ฉันต้องการให้มันหายไปหลังจากช่วงเวลาหนึ่ง จากเอกสารของ twitter และรหัสที่ฉันได้ตรวจสอบดูเหมือนว่าสิ่งนี้ไม่ได้ถูกอบใน:

  • คำถามแรกของฉันคือคำขอเพื่อยืนยันว่าสิ่งนี้ไม่ได้ถูกรวมเข้ากับ Bootstrap
  • ประการที่สองฉันจะบรรลุพฤติกรรมนี้ได้อย่างไร?

ลองดูที่นี่stackoverflow.com/questions/23101966/…นั่นคือคำตอบที่ดีที่สุดที่ฉันพบ
Andres

คำตอบ:


108

การโทรwindow.setTimeout(function, delay)จะช่วยให้คุณทำสิ่งนี้ได้สำเร็จ นี่คือตัวอย่างที่จะปิดการแจ้งเตือนโดยอัตโนมัติ 2 วินาที (หรือ 2,000 มิลลิวินาที) หลังจากปรากฏขึ้น

$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

หากคุณต้องการห่อด้วยฟังก์ชันที่ดีคุณสามารถทำได้

function createAutoClosingAlert(selector, delay) {
   var alert = $(selector).alert();
   window.setTimeout(function() { alert.alert('close') }, delay);
}

ถ้าอย่างนั้นคุณสามารถใช้มันได้ ...

createAutoClosingAlert(".alert-message", 2000);

ฉันมั่นใจว่ามีวิธีที่สวยงามกว่านี้ในการทำให้สำเร็จ


เฮ้เจสเซ่ขอบคุณ! setTimeout ใช้งานได้และฉันจะเลือกเป็นโซลูชันที่ถูกต้อง แต่ดูเหมือนว่าพฤติกรรมควรได้รับการอบตามที่ TK Kocheran ระบุไว้ (และเข้าสู่ระบบ)
Mario Zigliotto

ฉันดูรหัส bootstrap ของ twitter และไม่เห็นการรองรับการแจ้งเตือนการปิดอัตโนมัติ
jessegavin

ใช่ - ฉันกำลังรอการตอบกลับของ TK เพราะจากข้อความของเขาที่นี่ดูเหมือนว่าฟังก์ชันการปิดอัตโนมัติควรจะอยู่ที่นั่นและไม่ใช่ - แต่รายงานข้อผิดพลาดใน github ไม่ได้อ้างอิงถึงสิ่งนั้น
Mario Zigliotto

ใช่พวกเขาไม่ได้อ้างว่าสามารถปิดการแจ้งเตือนอัตโนมัติได้เพียง แต่ปิดการแจ้งเตือนแบบเป็นโปรแกรมด้วยปลั๊กอิน jQuery ที่ให้มาเท่านั้น เช่น$('#myAlert').alert('close')ไม่ทำงานตามที่โฆษณาไว้
Naftuli Kay

คุณอาจต้องการที่จะขยาย jQuery $('#my_fancy_alert').createAutoClosingAlert(2000)และวิธีการที่ส่งออกวัตถุเช่น: คุณเพียงแค่ต้องผ่าน$(this).remove()หรือ$(this).alert('close')ในsetTimeoutการติดต่อกลับ
aL3xa

99

ฉันไม่สามารถทำให้มันทำงานกับการแจ้งเตือนได้ ('ปิด') เช่นกัน

อย่างไรก็ตามฉันใช้สิ่งนี้และได้ผลดี! การแจ้งเตือนจะจางหายไปหลังจากผ่านไป 5 วินาทีและเมื่อหายไปแล้วเนื้อหาด้านล่างจะเลื่อนขึ้นไปยังตำแหน่งที่เป็นธรรมชาติ

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);

เป็นทางออกที่ยอดเยี่ยมแน่นอน การแจ้งเตือนจะจางหายไปอย่างมากหลังจากช่วงเวลาสั้น ๆ ดูเป็นมืออาชีพมาก
Matt Setter

ทำงานได้เร็วและยอดเยี่ยมแน่นอน
Mohamed Anis Dahmani

1
จำเป็นต้องเรียกสิ่งนี้ทุกครั้งที่การแจ้งเตือนปรากฏขึ้นหรือจะทำงานโดยอัตโนมัติสำหรับการแจ้งเตือนทั้งหมดกับชั้นเรียน.alert-messageหรือไม่ มีปัญหาในชั้นเรียนในการแจ้งเตือน BS3 ของฉันคือalert alert-danger alert-blockฉันจึงควรใช้.alert, alert-dangerหรือชื่อชั้นเต็มรูปแบบในฟังก์ชั่นการหมดเวลา?
raffian

@raffian ใส่แบบนี้$(".alert-message,.alert-danger,.alert-info")ไปเรื่อย ๆ คุณต้องคิดให้ออกว่าคุณต้องการในเว็บไซต์ทั้งหมดของคุณหรือไม่ หากคุณต้องการในทุกหน้าตัวอย่างเช่นในเบลดของ Laravel คุณสามารถใช้ @include ('scripts-alerts') หรือ @yield ('alerts') คุณต้องคิดออกหรือถามคำถามเฉพาะใน stackoverflow ไม่ใช่ที่นี่ ...
Pathros

1
วิธีที่ดีที่สุดในการทำเช่นนี้ ควรทำเครื่องหมายว่าเป็นคำตอบที่ถูกต้อง @Mario Zigliotto เนื่องจากองค์ประกอบอื่น ๆ เลื่อนขึ้นอย่างช้าๆและอย่าเปลี่ยนตำแหน่งทันที ที่ดูสวยงามและเป็นมืออาชีพมากขึ้น
Torsten Barthel

4

ฉันมีปัญหาเดียวกันนี้เมื่อพยายามจัดการกับการแจ้งเตือนแบบ popping และทำให้จางหายไป ฉันค้นหาสถานที่ต่างๆและพบว่านี่เป็นทางออกของฉัน การเพิ่มและลบคลาส 'in' ช่วยแก้ปัญหาของฉันได้

window.setTimeout(function() { // hide alert message
    $("#alert_message").removeClass('in'); 

}, 5000);

เมื่อใช้. remove () และในทำนองเดียวกันโซลูชัน .alert ('ปิด') ดูเหมือนว่าฉันจะประสบปัญหากับการแจ้งเตือนที่ถูกลบออกจากเอกสารดังนั้นหากฉันต้องการใช้ div การแจ้งเตือนเดิมอีกครั้งฉันก็ไม่สามารถทำได้ วิธีนี้หมายความว่าการแจ้งเตือนสามารถใช้ซ้ำได้โดยไม่ต้องรีเฟรชหน้า (ฉันใช้ aJax เพื่อส่งแบบฟอร์มและแสดงความคิดเห็นต่อผู้ใช้)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });

3

การใช้การดำเนินการ 'ปิด' ในการแจ้งเตือนไม่ได้ผลสำหรับฉันเพราะมันลบการแจ้งเตือนออกจาก DOM และฉันต้องการการแจ้งเตือนหลายครั้ง (ฉันกำลังโพสต์ข้อมูลด้วย ajax และฉันแสดงข้อความถึงผู้ใช้ในทุกโพสต์) . ดังนั้นฉันจึงสร้างฟังก์ชันนี้เพื่อสร้างการแจ้งเตือนทุกครั้งที่ต้องการจากนั้นเริ่มจับเวลาเพื่อปิดการแจ้งเตือนที่สร้างขึ้น ฉันส่งต่อไปยังฟังก์ชัน id ของคอนเทนเนอร์ที่ฉันต้องการต่อท้ายการแจ้งเตือนประเภทของการแจ้งเตือน ('สำเร็จ', 'อันตราย' ฯลฯ ) และข้อความ นี่คือรหัสของฉัน:

function showAlert(containerId, alertType, message) {
    $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
    $("#alert" + containerId).alert();
    window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
}


2

ด้วยวิธีแก้ไขปัญหาข้างต้นฉันยังคงสูญเสียความสามารถในการใช้งานการแจ้งเตือนซ้ำ วิธีแก้ปัญหาของฉันมีดังนี้:

ในการโหลดหน้า

$("#success-alert").hide();

เมื่อจำเป็นต้องแสดงการแจ้งเตือน

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

โปรดทราบว่า fadeTo ตั้งค่าความทึบเป็น 0 ดังนั้นการแสดงผลจึงไม่มีเลยและความทึบคือ 0 ซึ่งเป็นสาเหตุที่ฉันลบออกจากโซลูชันของฉัน


0

หลังจากอ่านคำตอบบางส่วนในหัวข้ออื่นแล้วนี่คือสิ่งที่ฉันลงเอยด้วย:

ฉันสร้างฟังก์ชันชื่อshowAlert()ที่จะเพิ่มการแจ้งเตือนแบบไดนามิกโดยมีตัวเลือกtypeและcloseDealy. ตัวอย่างเช่นคุณสามารถเพิ่มการแจ้งเตือนประเภทdanger(เช่นการแจ้งเตือนอันตรายของ Bootstrap) ซึ่งจะปิดโดยอัตโนมัติหลังจากผ่านไป 5 วินาทีดังนี้:

showAlert("Warning message", "danger", 5000);

เพื่อให้บรรลุสิ่งนั้นให้เพิ่มฟังก์ชัน Javascript ต่อไปนี้:

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container does not exist, add it
        $("body")
            .append( $('<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">') );
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div class="alert alert-' + type + ' fade in">')
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $("#alerts-container").prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}

0

ฉันต้องการวิธีง่ายๆในการซ่อนบางสิ่งหลังจากนั้นสักครู่และจัดการเพื่อให้สิ่งนี้ใช้งานได้:

ในเชิงมุมคุณสามารถทำได้:

$timeout(self.hideError,2000);

นี่คือฟังก์ชันที่ฉันเรียกใช้เมื่อถึงระยะหมดเวลา

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

ตอนนี้กล่องโต้ตอบ / UI ของฉันสามารถใช้คุณสมบัติเหล่านั้นเพื่อซ่อนองค์ประกอบได้


0

ด้วยความล่าช้าและจางหาย:

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);

0

ลองอันนี้

$(function () {

 setTimeout(function () {
            if ($(".alert").is(":visible")){
                 //you may add animate.css class for fancy fadeout
                $(".alert").fadeOut("fast");
            }

        }, 3000)

});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.