Bootstrap的模態框無法彈出的問題

今天在使用Bootstrap官網所提供的模態框插件時候發現其中的 可選尺寸模態框 無法彈出

在模態框前使用過其他 Bootstrap的js插件，可以正常使用，說明所需依賴js文件已經正常引用

注意：jquery.min.js與bootstrap.min.js文件引入順序不可顛倒，否則同樣無法使用，遇到相同問題的可以先檢查此處

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

可以排除js依賴問題，經過測試和對比官網其他源碼發現：

向紅框內class值添加 

 <div class="modal fade bs-example-modal-lg" 

問題解決

該問題主要原因是：按鈕是通過 data-target=".bs-example-modal-lg"這個屬性來指向被綁定的模態框，但是模態框的類名中沒有bs-example-modal-lg這個值，導致綁定失敗，點擊按鈕模態框無法彈出

模態框插件並不是可以直接使用，需要通過 data 屬性或 JavaScript 調用

 

通過 data 屬性：

通過在一個起控制器作用的元素（例如：按鈕）上添加 data-toggle="modal" 屬性，或者 data-target="#foo" 屬性，再或者 href="#foo" 屬性，用於指向被控制的模態框。

eg：

<button data-toggle="modal" data-target="#btn">點擊顯示模態框</button>

  <div class="modal fade" tabindex="-1" role="dialog" id="btn"> //

通過給button按鈕 data-toggle="modal"和data-target="#foo" 兩個屬性，以及給模態框一個和按鈕的data-target屬性值相同的id屬性值 來指向被控制的模態框

通過 JavaScript 調用：

$('#btn').modal()

通過元素的 id myModal 調用模態框