Bootstrap Modal不會彈出

我目前正在學習Bootstrap，並且只是將一段Modal組件的代碼放入我的項目中。但是，在我運行該程序後，我發現它無法正常工作，按鈕沒有按照應有的方式響應。所以我只是想知道是否有人可以幫助我？我會非常感激。Bootstrap Modal不會彈出

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
    <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="myModalLabel">Modal title</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" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
</div>

來源

2016-02-11 Gloluvmanga Smile

引導需要jQuery的。如果你打開任何瀏覽器的開發者工具，你會在控制檯中看到錯誤。

添加<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>到HTML

來源

2016-02-11 18:18:34 John

謝謝約翰，我試圖把劇本在我的代碼的底部，它的工作！ –

隨時接受答案然後:) – John

也許你只是忘了包括bootstrapjs和jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script src="<your path to js file>bootstrap.js"></script>

來源

2016-02-11 18:19:47

非常感謝你Moein，我剛剛檢查了我的代碼，發現腳本被放在標記。儘管我不是百分之百確定這是由於這個原因，但我相信它可能與我的問題有關，這使得模態沒有出現。 –

。在你的代碼沒有問題： https://jsfiddle.net/jsfiddleakarsh/6o0spz8g/ 啓動演示模式

            <!-- Modal --> 
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
                 <div class="modal-dialog" role="document"> 
                  <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="myModalLabel">Modal title</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" class="btn btn-primary">Save changes</button> 
                   </div> 
                  </div> 
                 </div> 
                </div>

來源

2016-02-11 18:44:53

你的代碼完全正常工作。檢查您是否添加了bootstrap.js，jquery.js和css文件或cdn鏈接。確保JQuery cdn鏈接位於引導鏈接的上方 –

謝謝Akarsh，我只是將腳本從移到了我的代碼的底部，它工作正常。從這一點，我只是想知道你是否知道它爲什麼會導致這個問題？另外，當我移動代碼時，我試圖移動CSS文件，儘管它最終工作，但我意識到頁面的裝飾在閃光後出現，這意味着它首先只是一個普通頁面，沒有任何樣式，然後在頁面快速閃爍後，樣式顯示出來。 –

我不清楚你的問題，任何如何這裏有幾點：始終保持有關角度和角度相關的鏈接或腳本，jquery，bootstrap和bootstrap css在頭部分。剩餘的腳本或控制器，工廠，指令等鏈接到最後。 –

你忘了jQuery的簡單的添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

來源

2016-02-11 18:52:26 Microsmsm

Bootstrap Modal不會彈出

回答

相關問題