一：問題場景

在開發中給button一個點選事件通過方法中的$('#id').modal('show')方式開啟模態框，發現開啟後模態框顯示一下又消失了。

二：解決方法

經過查詢大概有下面幾種方式，我的問題相對好解決採用的是第4個方法解決

1、bootstrap.min.js與modal.js不能混用。

2、觸發模態框的元件需要設定 data-toggle=“modal”  

3、換一個高版本的bootstrap.min.js

4、如果你的元素上即存在data-toggle="modal" data-target="#myModal"又存在javascript 函式響應點選事件開啟模態框

那麼刪除data-toggle="modal" data-target="#myModal"任意一個或者兩個都刪除便可解決顯示一下瞬間消失的問題。

三：基本使用

1.演示程式碼

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <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" id="myModalLabel">模態框（Modal）標題</h4>
            </div>
            <div class="modal-body">在這裡新增一些文字</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
 

2.基本使用

1》開啟模態框的方式有兩種。

第一種：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>

通過data-toggle="modal" 配合data-target="#myModal"去開啟模態框。

     data-toggle="modal"切換模態框開啟還是關閉；

     data-target="#myModal"開啟或關閉那個模態框；（#id     .類  去定位）

第二種：

新增點選事件<button class="btn btn-primary" onclick="myModalShow()">開始演示模態框</button>

通過javascript函式響應事件去開啟模態框。function myModalShow(){ $('#myModal').modal('show');}。

如果兩種方式同時存在就出現了文章剛開始的問題。第二種方法優先於第一種方法執行。開啟模態框後又被第二種方法切換為關閉狀態。

    1. Data-*屬性 模態框(modal) 觸發事件(data-toggle) 觸發物件data-target(ID 或類)

    2. 關閉所有data事件$(document).off(“.data-api”); 關閉某個data事件$(document).off(“.button.data-api”)

2》方法接受三種不同型別的引數

$(‘#myModal’).modal()

$(‘#myModal’).modal({keyboard:false})

$(‘#myModal).modal(‘show’)

3》事件：$(‘#myModal’).on(‘show.bs.modal’,function(e){…})

      獲取版本資訊：$.fn.tooltip.Constructor.VERSION

      事件 show.bs.modal在模態框彈出前執行  shown.sb.modal在模態框彈出後執行

      Hide.bs.modal在模態框隱藏前執行 hidden.bs.modal在模態框隱藏後執行

      $(‘#myModal-sm’).modal(“toggle”)   $(‘#myModal-sm’).modal(“show”)

  $(‘#myModal-sm’).on(‘show.sb.modal’,function(e){
           Alert(“show.bs.modal”);
  });

     下拉選單繫結事件 $('#dropMenu').dropdown("toggle");

     事件: show.bs.dropdown  shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown

  $(‘#.dropdown’).on(‘show.sb.modal’,function(){
           Alert(“show.bs.dropdown”);
  });

4》 HTML結構

Modal>modal-dialog>modal-content>modal-header(>modal-title)+modal-body+modal-footer

模態框大小modal-lg(大) modal-sm(小)  預設表示正常

5》背景/esc是否關閉

data-backdrop (true[單擊黑色背景會關閉當前彈窗] false[單擊不變背景並不會關閉當前彈窗] static[單擊黑色背景並不會關閉當前彈窗]])

Data-keyboard(true[不變背景按ESC按不會關閉當前彈窗]  false[黑色背景按ESC會關閉當前彈窗])

Data-show顯示當前模態窗