2017-06-14 66 views
0

我想要一個新聞通訊模式彈出一旦頁面加載,但我有一些麻煩讓我的模式加載時,我的屏幕加載。有人能幫我嗎?爲什麼我的引導模式不會彈出?

<!-- Introduction Modal --> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">Subscribe our Newsletter</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p> 
        <form> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Name"> 
         </div> 
         <div class="form-group"> 
          <input type="email" class="form-control" placeholder="Email Address"> 
         </div> 
         <button type="submit" class="btn btn-primary">Subscribe</button> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Modal Popup --> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#myModal").modal('show'); 
     }); 
    </script> 
+1

@Breevie確保'jquery.js'之前'bootstrap.js'負荷這個腳本。 –

+1

什麼是控制檯錯誤? 'jQuery'加載了嗎? 'Bootstrap.js'或'modal.js'加載了嗎?函數'modal()'是否被識別? –

回答

2

你的代碼工作正常,你可以嘗試檢查您的jQuery的鏈接和引導鏈接

$(function() { 
 
    $("#myModal").modal(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="myModal" class="modal fade"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
        <h4 class="modal-title">Subscribe our Newsletter</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p> 
 
        <form> 
 
         <div class="form-group"> 
 
          <input type="text" class="form-control" placeholder="Name"> 
 
         </div> 
 
         <div class="form-group"> 
 
          <input type="email" class="form-control" placeholder="Email Address"> 
 
         </div> 
 
         <button type="submit" class="btn btn-primary">Subscribe</button> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>