Twitter बूटस्ट्रैप अलर्ट संदेश को फिर से बंद करें और खोलें

Question

मुझे अलर्ट संदेशों की समस्या है। यह सामान्य रूप से प्रदर्शित होता है, और जब उपयोगकर्ता दबाता है 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();

पुनश्च! मुझे कुछ घटना होने के बाद ही चेतावनी संदेश दिखाने की आवश्यकता है (उदाहरण के लिए, बटन पर क्लिक किया गया)। या मैं क्या गलत कर रहा हूं?

Answer 1

डेटा-खारिज तत्व को पूरी तरह से हटा देता है। इसके बजाय jQuery के .hide () पद्धति का उपयोग करें।

फिक्स-इट-क्विक मेथड:

इनलाइन पर इस तरह से तत्व को छिपाने के लिए इनलाइन जावास्क्रिप्ट का उपयोग करना:

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

हालांकि यह केवल तब उपयोग किया जाना चाहिए जब आप आलसी हों (जो कि आपके लिए एक अच्छी बात है यदि आप एक रखरखाव योग्य ऐप चाहते हैं)।

यह सही तरीका है:

किसी तत्व को छिपाने के लिए एक नया डेटा गुण बनाएँ।

जावास्क्रिप्ट:

$(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="alert"अलर्ट वर्ग के साथ सभी तत्वों को छिपाएगा।

Xeon06 ने एक वैकल्पिक समाधान प्रदान किया:

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

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

Jquery doc से .closest की परिभाषा :

सेट में प्रत्येक तत्व के लिए, पहला तत्व प्राप्त करें जो स्वयं तत्व का परीक्षण करके और डोम ट्री में अपने पूर्वजों के माध्यम से पता लगाकर चयनकर्ता से मेल खाता है।

Comments

अरे! आपके बारे में यह सही जवाब है। यह alertपृष्ठ पर एक ही वर्ग (यानी ) वाले हर तत्व को छिपा देगा । इसके लिए एक समाधान इस लाइन के साथ कॉलबैक की सामग्री को प्रतिस्थापित करना होगा $(this).closest("." + $(this).attr("data-hide")).hide();, जो केवल निकटतम मूल तत्व को प्रभावित करेगा, यह देखते हुए कि खारिज बटन आमतौर पर अलर्ट के भीतर रखा जाता है जो इसे प्रभावित करता है।

— एलेक्स टर्पिन

यह सच है, मैंने इसे इस तरह से काम करने के बारे में नहीं सोचा था। हालांकि, इस समाधान की सादगी को काफी हद तक दूर कर देगा। मैं इसे मौजूदा कोड में एक टिप्पणी के रूप में जोड़ूंगा। धन्यवाद!

— हेनरिक कार्लसन

इसके लिए नया .. आप '$ (फंक्शन () {..'

— एस रोसम

कहीं भी एक जावास्क्रिप्ट फ़ाइल या एक <script> कोड यहाँ </ script> टैग में।

— हेनरिक कार्लसन

यदि आप $ (डॉक्यूमेंट) (.on '(' क्लिक ',' [data-hide] ', function () {/ * * /}) का उपयोग करेंगे तो आपका उत्तर एकदम सही होगा;)

— shock_gone_wild

Answer 2

मैंने सिर्फ डायलॉग को दिखाने / छिपाने के लिए एक मॉडल वेरिएबल का इस्तेमाल किया और हटा दिया 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 के लिए बाहर जाने की आवश्यकता को रोकता है

Comments

अत्यधिक मतदान स्वीकार किए गए उत्तर की तुलना में बहुत सरल / बेहतर समाधान!

— ABS

मेरी राय में बहुत बेहतर समाधान

— devqon

मुझे आपका विचार पसंद है

— कुमारसन पेरुमल

Answer 3

मुझे लगता है कि इस समस्या का एक अच्छा तरीका बूटस्ट्रैप के close.bs.alertईवेंट प्रकार का लाभ उठाना होगा ताकि इसे हटाने के बजाय अलर्ट को छिपाया जा सके। बूटस्ट्रैप इस घटना के प्रकार को उजागर करता है इसका कारण यह है कि आप DOM से अलर्ट को हटाने के डिफ़ॉल्ट व्यवहार को अधिलेखित कर सकते हैं।

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

Answer 4

यदि आप एक MVVM लाइब्रेरी जैसे पीटकर का उपयोग कर रहे हैं। जैसे कि (जो मैं अत्यधिक अनुशंसा करता हूं) आप इसे और अधिक सफाई से कर सकते हैं:

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

Comments

data-bind="click:function(){showAlert(false);}का एक आदर्श उदाहरण है निकला हुआ जावास्क्रिप्ट जो किया जा रहा से दूर है क्लीनर । मैं दृढ़ता से इस दृष्टिकोण का पालन नहीं करने की सलाह देता हूं

— लियो

@ लिओ किस तरीके से आज्ञाकारी?

— ओहद श्नाइडर

हर एक तरीके से निरीक्षण करना। आप अपने HTML संरचना / मार्कअप में सक्रिय रूप से "एम्बेडिंग" व्यवहार कर रहे हैं। कल्पना कीजिए कि आपको उस व्यवहार को बदलना था ... आपको कितने पृष्ठ और HTML तत्वों को बदलना होगा? मुझे गलत मत समझो, यह अभी भी पूछे गए सवाल का जवाब देता है और इसलिए मैं इसे नीचा नहीं दिखाऊंगा। लेकिन यह एक "क्लीनर" समाधान से दूर है

— लियो

नहीं, जो मैं वास्तव में कह रहा हूं वह चिंताओं के अलगाव का उपयोग है । आपके विचारों (html) में कभी कोई जावास्क्रिप्ट नहीं होनी चाहिए, नकारात्मक प्रभाव एक देव टीम में बहुत बड़ा हो सकता है। नॉकआउट और कुछ विवादास्पद data-bindविशेषता stackoverflow.com/questions/13451414/unobtrusive-knockout

— Leo

आप "जावास्क्रिप्ट" को क्या मानते हैं? क्या होगा यदि इसमें केवल विधि का नाम शामिल हो? क्या यह तथ्य है कि यह इसे एक पैरामीटर (झूठे) के साथ कहता है जो इसे आपकी आँखों में अप्रिय बनाता है?

— ओहद श्नाइडर

Answer 5

इसलिए यदि आप एक ऐसा समाधान चाहते हैं जो डायनेमिक html पेजों के साथ सामना कर सके, जैसा कि आप पहले से ही इसमें शामिल हैं, तो आपको उन सभी तत्वों पर हैंडलर को सेट करने के लिए jQuery के लाइव का उपयोग करना चाहिए जो अभी और भविष्य में डोम में हैं या हटा दिए गए हैं।

मैं उपयोग करता हूं

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

Answer 6

इसने मेरे लिए सबसे अच्छा काम किया:

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

Answer 7

मैं इस समस्या में भी भाग गया और बस बटन बंद करने के साथ समस्या यह है कि मुझे अभी भी मानक बूटस्ट्रैप अलर्ट-क्लोज इवेंट तक पहुंच की आवश्यकता है।

मेरा समाधान एक छोटा, अनुकूलन योग्य, jquery प्लगइन लिखना था जो कम से कम उपद्रव के साथ ठीक से गठित बूटस्ट्रैप 3 अलर्ट (या इसके बिना या इसके करीब बटन की तरह) को इंजेक्ट करता है और बॉक्स के बंद होने के बाद आपको इसे आसानी से पुन: बनाने की अनुमति देता है।

उपयोग, परीक्षण और उदाहरणों के लिए https://github.com/davesag/jquery-bs3Alert देखें ।

Answer 8

मैं हेनरिक कार्लसन द्वारा पोस्ट किए गए जवाब से सहमत हूं और मार्टिन प्रिक्रिल द्वारा संपादित किया गया है। सुगमता के आधार पर मेरा एक सुझाव है। मैं इसके अंत में .attr ("aria-hidden", "true") जोड़ूंगा, ताकि यह ऐसा दिखे:

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

Comments

क्या वाकई इसकी जरूरत है? jQuerys .hide फ़ंक्शन सेट डिस्प्ले: कोई नहीं, स्क्रीन पाठकों को स्मार्ट नहीं होना चाहिए ताकि वे इसे किसी भी तरह से पहचान सकें?

— हेनरिक कार्लसन

Answer 9

उपरोक्त सभी समाधान बाहरी पुस्तकालयों का उपयोग करते हैं, या तो कोणीय या jQuery, और बूटस्ट्रैप का एक पुराना संस्करण। तो, यहां बूट्सट्रैप 4 पर लागू प्योर जावास्क्रिप्ट में चार्ल्स वाइके-स्मिथ का समाधान है । हां, बूटस्ट्रैप को अपने स्वयं के मोडल और अलर्ट कोड के लिए 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"।

यहाँ अलर्ट दिखाने के लिए और क्लोज़ बटन को ओवरराइड करने के लिए जावास्क्रिप्ट है:

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

Answer 10

समस्या का उपयोग करने के कारण होता है style="display:none", आपको जावास्क्रिप्ट के साथ चेतावनी को छिपाना चाहिए या कम से कम इसे दिखाते समय, शैली की विशेषता को हटा दें।

Comments

वास्तव में नहीं, समस्या डेटा को खारिज करने वाले तत्व को हटा रही है

— हेनरिक कार्लसन ने

Answer 11

अन्य उत्तरों के आधार पर और डेटा-डिस्क्रिप्शन को डेटा-छिपाने के लिए बदलते हुए, यह उदाहरण एक लिंक से अलर्ट को खोलता है और अलर्ट को बार-बार खोलने और बंद करने की अनुमति देता है।

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

Answer 12

मैंने सभी तरीकों की कोशिश की है और मेरे लिए सबसे अच्छा तरीका बिल्ट-इन बूटस्ट्रैप कक्षाओं का उपयोग करना है .fadeऔर.in

उदाहरण:

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

नोट: jQuery में, अलर्ट को दिखाने के लिए addClass ('in'), इसे छिपाने के लिए removeClass ('in')।

मजेदार तथ्य: यह सभी तत्वों के लिए काम करता है। सिर्फ अलर्ट नहीं।

Answer 13

यहाँ हेनरिक कार्लसन द्वारा जवाब पर आधारित एक समाधान है लेकिन उचित घटना ट्रिगरिंग ( बूटस्ट्रैप स्रोतों के आधार पर ):

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

नोट के रूप में ज्यादातर मेरे लिए जवाब है।

Answer 14

क्या यह केवल एक अतिरिक्त "कंटेनर" डिव को जोड़ने और हटाए गए अलर्ट डिव को हर बार जोड़कर नहीं किया जा सकता है। लगता है मेरे लिए काम करता है?

एचटीएमएल

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

जे एस

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