ट्विटर बूटस्ट्रैप में मोडल क्लोजिंग इवेंट को कैसे हैंडल करें?

Question

ट्विटर बूटस्ट्रैप में, मोडल प्रलेखन को देख रहा है। अगर मोडल की करीबी घटना को सुनने और किसी कार्य को अंजाम देने का कोई तरीका है तो मैं यह पता लगाने में सक्षम नहीं था।

उदाहरण के लिए इस मोडल को एक उदाहरण के रूप में लेते हैं:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

ऊपर की तरफ X बटन और नीचे की तरफ बंद बटन की वजह से मोडल को छुपा / बंद कर सकते हैं data-dismiss="modal"। तो मुझे आश्चर्य है, अगर मैं किसी भी तरह से सुन सकता था?

वैकल्पिक रूप से मैं इसे मैन्युअल रूप से इस तरह कर सकता था, मुझे लगता है ...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

तुम क्या सोचते हो?

Comments

बिंद के

— साल्वाडोर डाली

Answer 1

बूटस्ट्रैप 3 और 4 के लिए अपडेट किया गया

बूटस्ट्रैप 3 और बूटस्ट्रैप 4 डॉक्स दो घटनाओं को संदर्भित करते हैं जिनका आप उपयोग कर सकते हैं।

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

और उनका उपयोग करने के तरीके पर एक उदाहरण दें:

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

लीगेसी बूटस्ट्रैप 2.3.2 उत्तर

बूटस्ट्रैप का प्रलेखन दो घटनाओं को संदर्भित करता है जिनका आप उपयोग कर सकते हैं।

छिपाना : इस घटना को तुरंत निकाल दिया जाता है जब छिपाने की विधि को कहा जाता है।
छिपा हुआ : यह घटना तब निकाल दी जाती है जब मॉडल उपयोगकर्ता से छिपाया जा रहा है (पूरा होने के लिए सीएसएस बदलाव की प्रतीक्षा करेगा)।

और उन्हें उपयोग करने के तरीके पर एक उदाहरण प्रदान करता है:

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

Comments

किसी कारण से यह मेरे लिए फायरिंग है जब मैं एक बटन के माउसआउट करता हूं जो कि मेरे पास है। और जब मैं मोडल में एक फॉर्म सबमिट करता हूं (यहां तक ​​कि ऑनसुमिट इवेंट में आग लगने से पहले)। किसी को पता है कि इस व्यवहार को कैसे रोकना है?

— लड़के

कुछ अतिरिक्त संदर्भ प्रदान करने के लिए, मैं $ (दस्तावेज़) .on ('छिपा हुआ', '#myModal', फ़ंक्शन () {// do something}) का उपयोग करने की सलाह दूंगा; इसे कुछ स्थितियों में काम न करने से रोकने के लिए, जैसे कि यह एक $ (दस्तावेज़) के भीतर निहित है।

— गारेथ डाइन

हैलो, मैं मोडल छिपे हुए जेकरी लागू करना चाहता हूं। और मैंने अपनी परियोजना में समान कोड लागू किया है लेकिन यह काम नहीं कर रहा है। क्या आपके पास इसके लिए कोई सुझाव है?

— हार्डी शाह

@ हार्डीशाह, आपको अपने कोड और / या त्रुटियों सहित एक नया प्रश्न पूछना चाहिए।

— albertedevigo

Answer 2

यदि आपका मोडल div गतिशील रूप से जोड़ा गया है तो उपयोग करें (For बूटस्ट्रैप 3)

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

यह गैर-गतिशील सामग्री के लिए भी काम करेगा।

Comments

छुपा बनाम छुपा के बीच अंतर ??

— माही

@mahi .hide घटना को निकाल दिया जाता है, तुरंत जब छिपाने की विधि विधि को बुलाया गया है। जब छिपी हुई घटना को निकाल दिया जाता है, जब मॉडल उपयोगकर्ता से छिपाया जा रहा है (पूरा होने के लिए सीएसएस संक्रमण की प्रतीक्षा करेगा)।

— कन्फ्यूज्ड

Answer 3

दो जोड़ी मोडल इवेंट हैं, एक "शो" और "दिखाया गया" है, दूसरा "छिपा" और "छिपा हुआ" है। जैसा कि आप नाम से देख सकते हैं, इवेंट फायर तब होता है जब मोडल करीब होने के बारे में होता है, जैसे कि टॉप-राइट कॉर्नर या क्लोज बटन पर क्रॉस पर क्लिक करना। जबकि छुपा वास्तव में करीब है मोडल के बाद निकाल दिया जाता है। आप इन घटनाओं को अपने आत्म परीक्षण कर सकते हैं। परीक्षा के लिए:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

और, अपने प्रश्न के लिए, मुझे लगता है कि आपको अपने मॉडल के 'छिपाने' की घटना को सुनना चाहिए।

Answer 4

बूटस्ट्रैप मोडल इवेंट:

1. Hide.bs.modal => तब होता है जब मोडल छिपने वाला होता है।
2. hidden.bs.modal => तब होता है जब मोडल पूरी तरह से छिपा हुआ होता है (CSS बदलाव पूरा होने के बाद)।

<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

मुझे उम्मीद है कि इससे सहायता मिलेगी।