bootstrap-modal không hiển thị hộp thoại

Question

Tôi đang sử dụng bootstrap trong ứng dụng đường ray. Tôi đã cố gắng để hiển thị hộp thoại bằng cách sử dụng bootstrap-phương thức, nhưng hộp thoại không đến cho tôi. Đây là mã xem của tôi.

<div id="creative_attachment_popup" class="modal hide fade" role="dialog"> 
    <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"> 
    <p>Do you eant to continue../p> 
    </div> 
    <div class="modal-footer"> 
    <a href="#" class="btn">Close</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
    </div> 
</div> 

Và đơn giản, tôi gọi là tập tin js như

$('#creative_attachment_popup').modal('show'); 

đoạn mã trên chỉ hiển thị một trang phai và Dosn't chứa bất kỳ hộp thoại. Khi tôi nhập dòng js trên vào bảng điều khiển của mình, nó hiển thị như sau:

<div id=​"creative_attachment_popup" class=​"modal hide fade in ui-dialog-content ui-widget-content" role=​"dialog"> <h1 style=​"display:​ block;​" aria-hidden=​"false">​…​</div>​ 

Tham khảo mã ở trên bằng mã html của tôi. Tại sao tôi nhận được điều này?

Answer 1

Kiểm tra như sau:

• Bạn có bao gồm jQuery.js?
• Bạn có bao gồm bootstrap.js không? (Bạn phải bao gồm jQuery trước khi bootstrap)
• Bạn có bao gồm bootstrap.css không?
• Đi tới Bảng điều khiển Javascript của trình duyệt (Firebug/Công cụ tạo Chrome), đảm bảo không có bất kỳ lỗi nào.

tôi sao chép và dán mã của bạn vào một trang trống và sau đó thêm người đứng đầu sau:

<link href="bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="bootstrap.js" type="text/javascript"></script> 

Sau đó, tôi chạy

$('#creative_attachment_popup').modal('show'); 

Các huy chương popup với tất cả mọi thứ trên đó. Vì vậy, tôi đoán bạn có thể không bao gồm tất cả mọi thứ (hoặc bao gồm một cái gì đó sai).

Answer 2

Bạn phải bao gồm jQuery.js trước, sau đó bootstrap.js !!

Và không sử dụng biểu mẫu html đơn giản cho tập lệnh. (Như <script src=""/>) bạn phải đóng nó như <script src=""></script>)

<!-- JQuery --> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script> 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 

<!-- BootStrap Link --> 
<link rel="stylesheet" type="text/css" href="/linker/styles/vendor/bootstrap.css"> 
<script type="text/javascript" src="/linker/js/vendor/bootstrap.js"></script> 

Bạn đã gọi $('#creative_attachment_popup').modal('show'); sau khi tài liệu đã sẵn sàng?

$(function() { 
    $('#creative_attachment_popup').modal('show'); 
});