ट्विटर बूटस्ट्रैप मोडल क्लोज़ के लिए एक फ़ंक्शन को बाइंड करें

Question

मैं एक नए प्रोजेक्ट पर ट्विटर बूटस्ट्रैप लिब का उपयोग कर रहा हूं और मैं पृष्ठ के भाग के लिए मोडल क्लोज पर नवीनतम जोंस डेटा को रीफ्रेश और पुनः प्राप्त करना चाहता हूं। मैं इसे कहीं भी दस्तावेज में नहीं देखता, क्या कोई इसे मेरे लिए इंगित कर सकता है या समाधान सुझा सकता है।

प्रलेखित विधियों का उपयोग करने के साथ दो समस्याएं

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

मैं मोडल के लिए पहले से "छिपा हुआ" वर्ग संलग्न करता हूं ताकि यह पृष्ठ लोड पर प्रदर्शित न हो ताकि दो बार लोड हो

यहां तक ​​कि अगर मैं छिपाने की कक्षा को हटा देता हूं और तत्व आईडी को सेट करता हूं और ऊपर फ़ंक्शन में display:noneजोड़ता console.log("THE MODAL CLOSED");हूं, जब मैं करीब पहुंचता हूं तो कुछ भी नहीं होता है।

Answer 1

बूटस्ट्रैप 3 और 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

बूटस्ट्रैप 3: getbootstrap.com/javascript/#modals-events

बूटस्ट्रैप 4: getbootstrap.com/docs/4.1/compenders/modal/#events

बूटस्ट्रैप 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

Getbootstrap.com/2.3.2/javascript.html#modals → ईवेंट देखें

Comments

यह काम करने के लिए लगता है, किसी कारण के लिए, जब मोडल पाद में एक बटन पर मँडरा यह भी आग। बटन एक नियमित रूप से सबमिट बटन है: <इनपुट प्रकार = "सबमिट" वर्ग = "btn btn-info" मूल्य = "जाओ" /> किसी भी विचार कैसे इस पर मँडरा जब छुपा घटना आग नहीं है? या, मैं कैसे पता लगा सकता हूं कि यह हॉवर के कारण निकाल दिया गया था? BTW: भले ही घटना निकाल दिया है मोडल संवाद बंद नहीं करता है।

— गाइ

मैं बूटस्ट्रैप 3 के साथ इस व्यवहार को नहीं देख रहा हूं, क्या आप एक बेला बना सकते हैं?

— 23

इस जवाब में शायद छिपे हुए.बस.डोमल और हिडेन.बीएस.मॉडल के बीच अंतर का उल्लेख होना चाहिए। सीएसएस एनिमेशन पूरा होने पर छिपाया जाता है, लेकिन मेरे परीक्षण में अगर कोई एनिमेशन नहीं हैं, तो यह कभी भी आग नहीं लगा सकता है (हालांकि सिर्फ एक बग हो सकता है)। यदि आप डेटा प्रबंधन के साथ काम कर रहे हैं, तो इसके बजाय Hide.bs.modal का उपयोग करना सुरक्षित हो सकता है, जिसे जैसे ही निकाल दिया जाता है .modal ('छिपाने') कहा जाता है। getbootstrap.com/javascript/#modals-usage - घटनाक्रम उपधारा देखें।

— इवान स्टिंकरनर

बूटस्ट्रैप 3: यह तब काम करता है जब मैं एक मोडल टैग data-dismiss="modal"(जैसे क्लोज बटन) के रूप में चिह्नित करता हूं , लेकिन यह तब काम नहीं करता जब मैं मोडल के आसपास के ब्लैक बैकग्राउंड एरिया पर क्लिक करता हूं। मोडल को खारिज कर दिया जाता है, लेकिन तब तक इसे फिर से खोला नहीं जा सकता, जब तक कि पेज रिफ्रेश न हो जाए। मैं दोनों की कोशिश की है 'hidden.bs.modal'और 'hide.bs.modal'कोई फायदा नहीं हुआ।

— marquito

@marquito आप क्या कर सकते हैं (मैं क्या करता हूं) इसे इस तरह से उपयोग करें: $('#myModal').modal({ backdrop: 'static', keyboard: false });इस तरह, ग्रे क्षेत्र पर क्लिक करने पर मोडल बंद नहीं होगा, और न ही Esc कुंजी दबाते समय।

— एसेड

Answer 2

बूटस्ट्रैप ४

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

एक काम कर रहे उदाहरण के लिए इस JSFiddle देखें:

https://jsfiddle.net/6n7bg2c9/

डॉक्स के मोडल इवेंट्स अनुभाग यहाँ देखें:

https://getbootstrap.com/docs/4.3/components/modal/#events

Comments

इस प्रकार की कॉलबैक को लागू करने के लिए ढूंढने वाले किसी भी व्यक्ति के लिए, बूटस्ट्रैप का एक विस्तार मॉड्यूल है जिसमें इस कार्यक्षमता के साथ-साथ गतिशील रूप से संवाद / अलर्ट / पुष्टिकरण बनाने के लिए कई अन्य उपयोगी कार्य शामिल हैं: bootboxjs.com

— jrriddle

@Ricardo लीमा की प्रतिक्रिया नीचे दी गई अब jQuery / बूटस्ट्रैप में घटनाओं की निगरानी के लिए सही तरीका है

— sbonami

@meatballs अभी भी काम करने के उदाहरण के लिए एक वोट है..क्योंकि बाइंड को हटा दिया गया है।

— स्टीफन पैटन

@ 100acrewood दोस्त, अब यह एक खोज है! धन्यवाद! re: bootboxjs.com

— स्टीफन पैटन

Answer 3

बूटस्ट्रैप 3 शुरू करना ( संपादित करें: बूटस्ट्रैप 4 में अभी भी वही है ) 2 उदाहरण हैं जिसमें आप घटनाओं को आग लगा सकते हैं:

1. जब मोडल "छिपाना" घटना शुरू होती है

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. जब मोडल "छिपाने" की घटना समाप्त हो गई

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Ref: http://getbootstrap.com/javascript/#js-events

Comments

इससे मुझे अपने बूटस्ट्रैप मोडल बग को ठीक करने में मदद मिली, जहां यह किसी भी मोडल के करीब शरीर में 15px पैडिंग-राइट जोड़ देगा। धन्यवाद!

— सैम मलयेक

2 घटनाओं को दिखाने के लिए अच्छा है। मेरे जैसे शुरुआती लोगों के लिए बेहतर है कि इस घटना को निकाल दिए जाने के लिए मोडल के नीचे रखा जाना चाहिए।

— लिननेल इमैनुएल नेरी

Answer 4

"लाइव" के बजाय आपको "ऑन" इवेंट का उपयोग करने की आवश्यकता है, लेकिन इसे दस्तावेज़ ऑब्जेक्ट पर असाइन करें:

उपयोग:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

Comments

यदि आप डायनामिक रूप से जोड़ा जाता है, तो आपको यह करना चाहिए। मुझे एक टन समय बचा लिया।

— डायलन वेंडर बर्ग

Answer 5

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Answer 6

बूटस्ट्रैप घटनाओं प्रदान करते हैं कि आप में हुक कर सकते हैं मोडल , जैसा कि आप किसी सक्रिय करना चाहते घटना जब मोडल छुपाई जा रही समाप्त हो गया है उपयोगकर्ता से आप उपयोग कर सकते hidden.bs.modal इस तरह घटना

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

एक कामकाजी फ़िदे की जाँच करें यहाँ दस्तावेज़ीकरण में मोडल विधियों और घटनाओं के बारे में अधिक पढ़ें

Answer 7

बूटस्ट्रैप 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

Hide.bs.modal : इस घटना को तुरंत निकाल दिया जाता है जब छिपाने की विधि विधि को बुलाया गया है।

Hidden.bs.modal : यह ईवेंट तब निकाल दिया जाता है जब मॉडल उपयोगकर्ता से छिपाया जा रहा हो (पूर्ण होने के लिए CSS बदलावों की प्रतीक्षा करेगा)।

Comments

यह तरीका बीएस 3 के लिए भी मान्य है। कृपया बीएस 2 (पदावनत) तरीके के लिए स्वीकृत उत्तर देखें।

— रोलैंड

Answer 8

मैं इसे इस तरह से करूंगा:

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

शेष अन्य द्वारा पहले ही लिखा जा चुका है। मैं प्रलेखन पढ़ने की भी सलाह देता हूं: विधि पर jquery -

Answer 9

मैंने बूटस्ट्रैप घटनाओं के संबंध में कई उत्तर देखे हैं, जैसे कि hide.bs.modalजब मोडल बंद हो जाता है।

उन घटनाओं के साथ एक समस्या है: मोडल में कोई भी पॉपअप (पॉपओवर, टूलटिप्स आदि) उस घटना को ट्रिगर करेगा।

एक मोडल बंद होने पर घटना को पकड़ने का एक और तरीका है।

$(document).on('hidden','#modal:not(.in)', function(){} );

inमोडल ओपन होने पर बूटस्ट्रैप क्लास का उपयोग करता है। hiddenघटना का उपयोग करना बहुत महत्वपूर्ण है क्योंकि inजब भी घटना hideशुरू होती है तब वर्ग को परिभाषित किया जाता है।

यह समाधान IE8 में काम नहीं करेगा क्योंकि IE8 Jquery :not()चयनकर्ता का समर्थन नहीं करता है ।

Answer 10

मैं कुछ के साथ के रूप में एक ही मुद्दे चल रहा था

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

आपको इसे पृष्ठ के निचले भाग में रखने की आवश्यकता है, इसे शीर्ष पर रखने से कभी भी घटना नहीं होती है।

Comments

वास्तव में। यह अच्छा है कि आपने उल्लेख किया है कि घटना को आग देने के लिए इसे मोडल के नीचे रखा जाना चाहिए।

— लिननेल इमैनुएल नेरी

मैं नियमों को उससे थोड़ा तंग करूंगा। जब jQuery चयनकर्ता DOM में मौजूद होने के लिए $("#myModal")एक myModalआवश्यकता के साथ HTML तत्व को लागू किया जाता है । तो आप इस कोड को पृष्ठ के शीर्ष पर रख सकते हैं, लेकिन एक $(document).on("ready", function(){ ... });(या समान फ़ंक्शन जिसे DOM के तत्व के साथ आबादी के बाद कहा जाता है) के भीतर रखा गया है ।

— एंडी जीई

Answer 11

यदि आप प्रत्येक मोडल बंद पर एक समारोह में आग लगाना चाहते हैं, तो आप इस विधि का उपयोग कर सकते हैं,

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

इसलिए आपको हर बार मोडल आईडी निर्दिष्ट करने की आवश्यकता नहीं है।