बूटस्ट्रैप मोडल एक फ़ंक्शन नहीं है

Question

मैं ट्विटर बूटस्ट्रैप मोडल संवाद का उपयोग कर रहा हूं। और यह ठीक काम करता है, जबकि केवल

<a class="btn" data-controls-modal="my-modal" >Launch Modal</a> 

साथ इसे खोलने लेकिन जब मैं की तरह

$('#close_popup').click(function(){ 
    $('#rules').modal('toggle');  
}); 

कुछ कोशिश मैं एक जावास्क्रिप्ट त्रुटि मिलती है:

bootstrap modal is not a function

इसके अलावा। जहां तक ​​मैं .close के साथ लिंक को समझता हूं, विंडो बंद करनी चाहिए और ऐसा नहीं है। मैं गलत क्या करूँ?

Answer 1

मुझे नहीं पता कि आपने इस मुद्दे को समझ लिया है या नहीं, यह कुछ महीने पहले नहीं था जब आपने सवाल पूछा था, लेकिन मैं एक ही समस्या में आया और इसे किसी अन्य प्लगइन के साथ संघर्ष करना पड़ा, इसलिए मैं भविष्य की पूछताछ के लिए समाधान पोस्ट करूंगा।

यहां एक उदाहरण है जो मैंने इस मुद्दे को पाने के लिए किया था।

function ShowImageInModal(path) { 
    jQuery.noConflict(); 
    (function ($) { 
     $('#modalImage').removeAttr("src").attr("src", path); 
     $('#myModal').modal('show'); 
    } 
    )(jQuery); 
} 

Answer 2

$('#rules').modal('toggle'); 

क्या नियम 'आपके मोडल की आईडी है ?? क्योंकि हम केवल उस div के साथ .odal विधियों का उपयोग कर सकते हैं जिसमें 'मोडल' वर्ग है।

और आप यह देखते हुए कि

<a class="btn" data-controls-modal="my-modal" >Launch Modal</a> 

इस ठीक काम कर रहा है और इस में आप मॉडल के लिए उपयोग 'मेरे मोडल' आईडी की है।

Answer 3

शायद एक नाम स्थान संघर्ष, बस यह करने के ...

jQuery(document).ready(function($) { 
    $('#myModal').modal('toggle'); 
}); 

Answer 4

सुनिश्चित करें कि आप एक से अधिक स्थानों, स्थानीय या दूरदराज से आने वाले अनेक jQuery फ़ाइलें लोड नहीं कर रहे हैं।

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel">Feed Selection</h4> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
       <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> --> 
       <button type="button" id="feedsave" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

bootbox जिसका मतलब है किसी भी तरह बूटस्ट्रैप मोडल पॉपअप का विरोध:

Answer 5

मैं निम्नलिखित कोड को हटाने के द्वारा इस समस्या का समाधान।

Answer 6

jQuery.noConflict()$(document).ready(function(){}) के अंदर भी मदद कर सकता है।

$(document).ready(function(){ 
    jQuery.noConflict(); 
}); 

Answer 7

सबसे संक्षिप्त तरीके इन संघर्षों से बचने के लिए में से एक है:

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/