ट्विटर बूटस्ट्रैप का उपयोग करके अलर्ट को स्वचालित रूप से कैसे बंद करें

Question

मैं ट्विटर के बूटस्ट्रैप सीएसएस फ्रेमवर्क (जो शानदार है) का उपयोग कर रहा हूं। उपयोगकर्ताओं को कुछ संदेशों के लिए मैं उन्हें अलर्ट जेएसस्क्रिप्ट और सीएसएस का उपयोग करके प्रदर्शित कर रहा हूं।

रुचि रखने वालों के लिए, यह यहां पाया जा सकता है: http://getbootstrap.com/javascript/#alerts

मेरा मुद्दा यह है; जब मैंने किसी उपयोगकर्ता को अलर्ट प्रदर्शित किया है, तो मैं चाहूंगा कि वह कुछ समय के अंतराल के बाद बस चला जाए। ट्विटर के डॉक्स और उसके द्वारा देखे गए कोड के आधार पर ऐसा दिखता है कि यह बेक नहीं किया गया है:

• मेरा पहला सवाल पुष्टि के लिए एक अनुरोध है कि यह वास्तव में बूटस्ट्रैप में बेक नहीं किया गया है
• दूसरे, मैं इस व्यवहार को कैसे प्राप्त कर सकता हूं?

Comments

यहां एक नज़र डालें stackoverflow.com/questions/23101966/… जो मुझे मिला सबसे अच्छा जवाब है

— एंड्रेस

Answer 1

कॉल window.setTimeout(function, delay)करने से आप इसे पूरा कर पाएंगे। यह एक उदाहरण है जो प्रदर्शित होने के बाद स्वचालित रूप से 2 सेकंड (या 2000 मिलीसेकंड) को बंद कर देगा।

$(".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);

मुझे यकीन है कि इसे पूरा करने के लिए और अधिक सुरुचिपूर्ण तरीके हैं।

Comments

हे जेसी धन्यवाद! सेटटाइमआउट काम करता है और मैं इसे एक वैध समाधान के रूप में चुनूंगा, लेकिन ऐसा प्रतीत होता है कि व्यवहार वास्तव में टीके कोचरन (और लॉग इन) के रूप में बेक किया जाना चाहिए।

— मारियो ज़िग्लिओटोक

मैंने ट्विटर बूटस्ट्रैप कोड को देखा और ऑटो-क्लोजिंग अलर्ट के लिए कोई समर्थन नहीं देखा।

— जेसेगैविन

हां - टीके की प्रतिक्रिया का इंतजार कर रहे हैं क्योंकि उनके संदेश से यह लगता है कि ऑटो-पास की कार्यक्षमता होनी चाहिए और नहीं है - लेकिन जीथब पर बग की रिपोर्ट का कोई संदर्भ नहीं है।

— बजे मारियो जिग्लिओटोक

हाँ, वे केवल ऑटो अलर्ट को सक्षम करने का दावा नहीं कर रहे हैं, केवल टी प्रोग्रामेटिक रूप से सक्षम करने के लिए उन्हें प्रदान करने में सक्षम हैं jQuery प्लगइन। यानी $('#myAlert').alert('close')काम के रूप में विज्ञापित नहीं करता है।

— ४ft पर Naftuli Kay

आप jQuery का विस्तार करना चाहते हैं और उस विधि को ऑब्जेक्ट से भेज सकते हैं, जैसे $('#my_fancy_alert').createAutoClosingAlert(2000):। आपको बस पास $(this).remove()या कॉलबैक $(this).alert('close')में जाने की आवश्यकता है setTimeout।

— aL3xa

Answer 2

मैं इसे अलर्ट के साथ काम करने के लिए नहीं मिला। ('पास') या तो।

हालाँकि मैं इसका उपयोग कर रहा हूँ और यह एक इलाज का काम करता है! अलर्ट 5 सेकंड के बाद दूर हो जाएगा, और एक बार चले जाने के बाद, इसके नीचे की सामग्री अपनी प्राकृतिक स्थिति तक पहुंच जाएगी।

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

Comments

निश्चित रूप से एक महान समाधान। चेतावनी छोटे अंतराल के बाद वास्तव में अच्छी तरह से बाहर हो जाती है। बहुत पेशेवर लगता है।

— मैट सेटर

काम तेजी से और महान वास्तव में।

— मोहम्मद अनीस दहमानी

क्या हर बार अलर्ट प्रदर्शित होने पर इसे कॉल करना पड़ता है, या क्या यह क्लास के साथ सभी अलर्ट के लिए स्वचालित रूप से काम करता है .alert-message? परेशानी हो रही है, मेरे BS3 अलर्ट पर वर्ग है alert alert-danger alert-block, इसलिए मैं का उपयोग करना चाहिए .alert, alert-dangerया समय समाप्ति समारोह में पूर्ण वर्ग के नाम?

— रफियन

@ क्रैफ़ियन ने इसे इस तरह रखा: $(".alert-message,.alert-danger,.alert-info")और इसी तरह। आपको यह पता लगाना होगा कि आप इसे अपनी पूरी वेबसाइट में चाहते हैं या नहीं। यदि आप इसे हर पेज में चाहते हैं, उदाहरण के लिए, लारवेल के ब्लेड में आप @include ('स्क्रिप्ट-अलर्ट') या @yield ('अलर्ट') जैसे कुछ का उपयोग कर सकते हैं। आपको

— स्टैकओवरफ़्लो

यह करने का सबसे अच्छा तरीका है। सही उत्तर के रूप में चिह्नित किया जाना चाहिए @Mario Zigliotto क्योंकि अन्य तत्व धीरे-धीरे स्लाइड करते हैं और तुरंत अपनी स्थिति नहीं बदलते हैं। यह कहीं अधिक सुंदर और पेशेवर दिखता है।

— टॉरस्टेन बार्टेल

Answer 3

पॉपिंग अलर्ट्स को संभालने और उन्हें लुप्त करने की कोशिश के दौरान मेरे पास यही मुद्दा था। मैंने विभिन्न स्थानों पर खोज की और पाया कि यह मेरा समाधान है। 'इन' क्लास को जोड़ना और हटाना मेरा मुद्दा तय हो गया।

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

}, 5000);

जब .remove () और इसी तरह .alert ('क्लोज़') सॉल्यूशन का उपयोग किया जाता है, तो मुझे लगता है कि मैं डॉक्यूमेंट से हटाए जा रहे अलर्ट के साथ एक मुद्दे को हिट कर रहा था, इसलिए यदि मैं उसी अलर्ट डिव का उपयोग करना चाहता था तो मैं फिर से असमर्थ था। इस समाधान का अर्थ है कि पृष्ठ को ताज़ा किए बिना चेतावनी पुन: प्रयोज्य है। (मैं एक प्रपत्र प्रस्तुत करने के लिए और उपयोगकर्ता के लिए प्रतिक्रिया प्रस्तुत करने के लिए aJax का उपयोग कर रहा था)

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

Answer 4

अलर्ट पर 'करीब' कार्रवाई का उपयोग करना मेरे लिए काम नहीं करता है, क्योंकि यह DOM से अलर्ट को हटा देता है और मुझे कई बार अलर्ट की आवश्यकता होती है (मैं ajax के साथ डेटा पोस्ट कर रहा हूं और मैं प्रत्येक पोस्ट पर उपयोगकर्ता को एक संदेश दिखाता हूं) । इसलिए मैंने इस फ़ंक्शन को बनाया जो मुझे हर बार अलर्ट बनाने की आवश्यकता है और फिर निर्मित अलर्ट को बंद करने के लिए टाइमर शुरू करता है। मैं फंक्शन में कंटेनर की आईडी को पास करता हूं, जिससे मैं अलर्ट, अलर्ट का प्रकार ('सफलता', 'खतरा', आदि) और संदेश भेजना चाहता हूं। यहाँ मेरा कोड है:

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

Answer 5

यह कॉफ़ीस्क्रिप्ट संस्करण है:

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000

Answer 6

ऊपर दिए गए प्रत्येक समाधान के साथ मैंने अलर्ट की पुन: उपयोगिता को खोना जारी रखा। मेरा समाधान इस प्रकार था:

पेज लोड पर

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

एक बार चेतावनी प्रदर्शित करने की आवश्यकता है

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

ध्यान दें कि fadeTo अपारदर्शिता को 0 पर सेट करता है, इसलिए प्रदर्शन कोई नहीं था और अपारदर्शिता 0 थी, यही वजह है कि मैंने अपने समाधान से हटा दिया।

Answer 7

यहाँ कुछ जवाबों पर जाने के बाद एक और सूत्र में, यहाँ बताया गया है कि मैंने क्या किया:

मैंने एक फ़ंक्शन बनाया, जो showAlert()गतिशील रूप से एक अलर्ट जोड़ देगा, एक वैकल्पिक typeऔर के साथ closeDealy। इसलिए, उदाहरण के लिए, आप एक अलर्ट टाइप कर सकते हैं danger(जैसे, बूटस्ट्रैप का अलर्ट-खतरा) जो 5 सेकंड के बाद अपने आप बंद हो जाएगा:

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

इसे प्राप्त करने के लिए, निम्नलिखित जावास्क्रिप्ट फ़ंक्शन जोड़ें:

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

Answer 8

मुझे कुछ समय के बाद कुछ छिपाने के लिए एक बहुत ही सरल समाधान की आवश्यकता थी और यह काम करने में कामयाब रहा:

कोणीय में आप ऐसा कर सकते हैं:

$timeout(self.hideError,2000);

यहां वह फ़ंक्शन है जिसे मैं कॉल करता हूं जब टाइमआउट हो गया है

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

तो अब मेरे संवाद / ui तत्वों को छिपाने के लिए उन गुणों का उपयोग कर सकते हैं।

Answer 9

देरी और फीका के साथ:

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

Answer 10

इसको आजमाओ

$(function () {

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

        }, 3000)

});