一：問題場景

在開發中給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" οnclick="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顯示當前模態窗

總結

以上是生活随笔為你收集整理的bootstrap-modal 模态框显示一下又消失问题解决以及模态框的基本使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。