ट्विटर बूटस्ट्रैप मोडल विंडो फ़्लिकर

Question

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

$(function(){ 
     $('#modal-from-dom').modal({ 
      backdrop: true, 
      keyboard: true 
     }); 
     $('#modalbutton').click(function(){ 

      $('#my-modal').bind('show', function() { 
       // do sth with the modal 
      }); 
      $('#modal-from-dom').modal('toggle'); 

      return false; 
     }); 
    }); 

HTML से सीधे बूटस्ट्रैप js पेज

<div id="modal-from-dom" class="modal hide fade"> 
    <div class="modal-header"> 
     <a href="#" class="close">×</a> 
     <h3>Modal Heading</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn primary">Primary</a> 
     <a href="#" class="btn secondary">Secondary</a> 
    </div> 
</div> 
<button id="modalbutton" class="btn">Launch Modal</button> 

कॉपी किया जाता है की तरह लग रहा तो समस्या, बटन पहली बार ठीक से काम करने लगता है क्लिक कर रहा है दूसरे के बाद मोडल क्लिक करें खिड़की 1 सेकंड या तो के लिए दिखाता है और फिर गायब हो जाता है। अगर मैं 'टॉगल' को 'शो' में बदलता हूं, तो दूसरे क्लिक के बाद बैकड्रॉप पूरी तरह से फीका नहीं होगा। मैं इसे कैसे डिबग कर सकता हूं?

Answer 1

जिस तरह से आप वर्तमान में कार्य कर रहे हैं, वह झटके का कारण है। अनिवार्य रूप से, आप ब्राउज़र को क्या कह रहे हैं: div दिखाए जाने के बाद सामग्री को अद्यतन करें। आप लिंक शो पर हर बार ऑनशो ईवेंट को बाध्य करने के लिए jQuery को भी बता रहे हैं। उस बाध्य घोषणा ऑनक्लिक घटना के बाहर की जानी चाहिए।

आपको क्या करना चाहिए, इसे प्रदर्शित करने से पहले अपनी मोडल सामग्री को बदलना है, ब्राउज़र को इसे प्रदर्शित करने से पहले उचित रूप से डीओएम समायोजित करने की अनुमति देता है, झिलमिलाहट को कम करने (अगर समाप्त नहीं होता)।

इस तरह कुछ और प्रयास करें:

$(function(){ 
    $('#modal-from-dom').modal({ 
     backdrop: true, 
     keyboard: true 
    }); 
    $('#modalbutton').click(function(){ 

     // do what you need to with the modal content here 

     // then show it after the changes have been made 

     $('#modal-from-dom').modal('toggle'); 
     return false; 
    }); 
});