बूटस्ट्रैप मोडल ओपन पर एक फंक्शन कॉल करना

Question

मैं JQuery UI के संवाद का उपयोग करता था, और यह था open विकल्प था, जहाँ आप डायलॉग के खुलने के बाद कुछ जावास्क्रिप्ट कोड को निष्पादित करने के लिए निर्दिष्ट कर सकते हैं। मैंने उस विकल्प का उपयोग संवाद में पाठ का चयन करने के लिए किया है जो मेरे पास है।

अब मैं बूटस्ट्रैप के मोडल का उपयोग करना चाहता हूं। नीचे HTMl कोड है:

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

और उस बटन के लिए जो मोडल को खोलता है:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

मैंने बटन के ऑनक्लिक श्रोता का उपयोग करने का प्रयास किया, लेकिन मोडल दिखाई देने से पहले चेतावनी संदेश प्रदर्शित किया गया था :

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

Comments

shown.bs.modalघटना तब होती है जब HTML दस्तावेज़ में कम से कम <div class="modal fade"><div class="modal-dialog"></div></div>संरचना होती है।

— केमिकल प्रोग्रामर

dublicate stackoverflow.com/questions/12190119/bootstrap-modal-show-event

— gtzinos

नमस्ते टिप्पणी @ रासायनिक कार्यक्रमकर्ता, यह जवाब के साथ दिखाई देना चाहिए

— तारेक

Answer 1

आप दिखाए गए ईवेंट / शो ईवेंट का उपयोग अपनी आवश्यकता के आधार पर कर सकते हैं:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

डेमो: प्लंकर

बूटस्ट्रैप 3.0 के लिए अद्यतन

बूटस्ट्रैप 3.0 के लिए आप अभी भी दिखाए गए इवेंट का उपयोग कर सकते हैं, लेकिन आप इसे इस तरह से उपयोग करेंगे:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

"इवेंट्स" के तहत यहां बूटस्ट्रैप 3.0 डॉक्स देखें ।

Comments

$("#code").on("shown.bs.modal", function(e) {})बूटस्ट्रैप 3.0 के लिए उपयोग करें ।

— तेवुआं

खाते क्या रासायनिक प्रोग्रामर इस कोड के लिए कम से कम <div class = "मोडल फीका"> <div class = "मोडल-संवाद"> </ div> </ div> संरचना की आवश्यकता होगी, के नाम से जाना के बारे में कहा में रखना सुनिश्चित करें

— Whyoz

#codeJQuery चयनकर्ता, jQuery के लिए मूल सामग्री में से एक को संदर्भित करता है: w3schools.com/jquery/jquery_selectors.asp

— DDW

मैं $(document).on("shown.bs.modal", ...समग्र सुनने के लिए उपयोग करता हूं

— vladkras

कम से कम दिखाया गया है। मोड के दिखाए जाने से पहले वास्तव में .bs.modal निष्पादित होता है। यह मेरे मामले में कोई समस्या नहीं है, लेकिन यह जानना अच्छा हो सकता है।

— जॉनी

Answer 2

काम नहीं करेगा .. उपयोग करें $(window) इसके बजाय

दिखाने के लिए

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

छिपाने के लिए

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

Comments

$ ("#modal") .on ('दिखाया गया', फ़ंक्शन () {अलर्ट ("मैं चाहता हूं कि यह मोडल खुलने के बाद दिखाई दे!");} मेरे लिए काम नहीं कर रहा था, लेकिन $ (विंडो) ने काम किया !! धन्यवाद @viper_tkd

— क्रुटल मोदी

मुझे किसी ऐसे मोडल से बंधने की जरूरत थी जो किसी विशेष चयनकर्ता द्वारा खोला / बंद किया गया हो, न कि उसे। इस जवाब ने मेरे लिए उस मामले में अच्छा काम किया।

— ज्योफ

यह मोडल GUI पर पूरी तरह लोड होने से पहले काम करता है। मैं मोडल लोड होने के बाद अपने मोडल से डेटा लेना चाहता हूं - यह तरीका सब कुछ के लिए 'अपरिभाषित' देता है क्योंकि मोडल जीयूआई अभी तक मौजूद नहीं है, इसलिए फ़ील्ड और बाकी सब कुछ अभी भी क्वेरी करने योग्य नहीं है। (दृश्यमान नहीं)

— FrenkyB

यह मेरे लिए काम करता है, लेकिन मैंने हैंडलर के भीतर एक विशिष्ट मोडल को लक्षित करने के लिए एक चेक जोड़ा: if( $('#code').is( e.relatedTarget ) ) { ... }चूंकि मेरे पास पृष्ठ पर कई थे।

— एलिकार्न

सही ईवेंट नाम के लिए धन्यवाद, लेकिन, $ (विंडो) के लिए तत्व आईडी को बदलने की कोई आवश्यकता नहीं है। Jquery 3.4 के साथ bs4 का उपयोग करना।

— Jcc.Sanabria

Answer 3

आप उपयोग कर सकते हैं showके बजाय shownसमारोह मोडल खुले के बाद के बजाय, मोडल खुले से पहले लोड करने के लिए बनाने के लिए।

$('#code').on('show.bs.modal', function (e) {
  // do something...
})

Answer 4

बूटस्ट्रैप मोडल घटनाओं को उजागर करता है। shownइस तरह की घटना के लिए सुनो

$('#my-modal').on('shown', function(){
  // code here
});

Answer 5

अगर किसी को अभी भी एक समस्या है जो पूरी तरह से मेरे लिए पूरी तरह से काम करके काम कर रही है (load.bs.modal):

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});

Answer 6

आप बूटस्ट्रैप मॉडल को दिखाने और छिपाने के लिए बेल्व कोड का उपयोग कर सकते हैं।

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

और यदि आप मॉडल को छिपाना चाहते हैं तो आप नीचे दिए गए कोड का उपयोग कर सकते हैं।

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

मुझे उम्मीद है कि यह उत्तर आपके प्रोजेक्ट के लिए उपयोगी है।

Comments

कॉपीकैट फिर ... उपयोगकर्ता के अन्य उत्तर देखें

— लॉरेंट बी