bootstrap modal không phải là chức năng

Question

Tôi đang sử dụng hộp thoại phương thức khởi động twitter. Và nó hoạt động tốt trong khi chỉ mở nó với

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

Nhưng khi tôi thử một cái gì đó giống như

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

tôi nhận được một lỗi javascript:

bootstrap modal is not a function

Hơn nữa. Theo như tôi hiểu liên kết với .close phải đóng cửa sổ và không. Tôi làm gì sai?

Answer 1

Tôi không biết liệu bạn có tìm ra vấn đề này hay không là một vài tháng trước khi bạn đặt câu hỏi, nhưng tôi đã gặp phải vấn đề tương tự và nó phải làm với xung đột với một plugin khác, vì vậy tôi sẽ đăng giải pháp cho các yêu cầu trong tương lai.

Dưới đây là ví dụ về những gì tôi đã làm để giải quyết vấn đề này.

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

Answer 2

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

'Quy tắc' có phải là id của phương thức của bạn không ?? vì chúng ta có thể sử dụng các phương thức .modal chỉ với div có lớp 'modal'.

và bạn cho rằng

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

này đang làm việc tốt và trong này bạn phải sử dụng 'my-modal' id cho phương thức.

Answer 3

có thể là một cuộc xung đột không gian tên, chỉ cần làm điều này ...

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

Answer 4

Hãy chắc chắn rằng bạn đang không tải nhiều file jquery từ nhiều địa điểm, địa phương hoặc từ xa.

Answer 5

tôi giải quyết vấn đề này bằng cách loại bỏ các đoạn mã sau:

<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> 

Có nghĩa bootbox bằng cách nào đó xung đột với các phương thức bootstrap popup.

Answer 6

Thêm jQuery.noConflict() bên trong $(document).ready(function(){}) cũng có thể trợ giúp.

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

Answer 7

một trong những cách ngắn gọn nhất để tránh những xung đột là:

<script src="jquery.js"></script> 
<script src="prototype.js"></script> 
<script> 
jQuery(function($){ 
// Your jQuery code here, using the $ 
}); 
</script> 

như trong:

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