Mở phương thức Bootstrap khi tải trang

Question

Tôi nhận được một trang có phương thức bootstrap trên đó (hướng dẫn sử dụng: http://getbootstrap.com/javascript/#modals).

Tôi muốn mở phương thức này khi tải trang. Tuy nhiên điều này không xảy ra.

<!-- Modal --> 
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4> 
     </div> 
     <div class="modal-body"> 
     <p>However the account provided is not known.<BR> 
     If you just got invited to the group, please wait for a day to have the database synchronized.</p> 

     <p>You will now be shown the Demo site.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

<script type="text/javascript"> 
<!-- 
$('#memberModal').modal('show'); 
//--> 
</script> 

Bây giờ, nếu tôi thêm nút vào mã. Phương thức được mở khi tôi nhấn nút.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#memberModal"> 
    Launch modal 
</button> 

Tôi đã thử một số thứ, nhưng tôi không thể làm cho nó hoạt động khi phương thức tự mở khi tải trang. Tôi có cả js và css của bootstrap được gọi là trong đầu html.

<!-- Bootstrap - Latest compiled and minified CSS --> 
<link rel="stylesheet" type='text/css' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

<!-- Bootstrap - Latest compiled and minified JavaScript --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

Tôi đang làm gì sai?

Answer 1

tôi thấy vấn đề. Mã này được đặt trong một tệp riêng biệt được thêm bằng hàm php include(). Và điều này bao gồm đã xảy ra trước khi các tệp Bootstrap được tải. Vì vậy, tệp Bootstrap JS chưa được tải, khiến phương thức này không làm bất cứ điều gì.

Với mẫu mã ở trên không có gì sai và hoạt động như dự định khi được đặt trong phần nội dung của trang html.

<script type="text/javascript"> 
$('#memberModal').modal('show'); 
</script> 

Answer 2

Sử dụng sự kiện document.ready() xung quanh cuộc gọi của bạn.

$(document).ready(function() { 

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

}); 

jsFiddle cập nhật - http://jsfiddle.net/uvnggL8w/1/