bootstrap modal模態(tài)框的幾種打開方法+問題集錦
第一部分:
關(guān)于bootstrap中modal的使用,下面把幾種自己用的打開方法展示出來
首先呢旨枯,得有個Bootstrap的頁面傀顾,這里就不說了靡羡。
其次呢犀盟,得有個modal放在頁面中拣度,不管你這段代碼加在頁面代碼的什么地方碎绎,默認(rèn)是不會顯示出來的
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">機(jī)構(gòu)篩選</h4>
</div>
<div class="modal-body">
機(jī)構(gòu)信息
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">確認(rèn)</button>
</div>
</div>
</div>
</div>```
**最后呢**,就是下面的幾種打開方式:
**第一種打開方式:**
在某個綁定的元素上添加下面兩個屬性【例如在button或者a標(biāo)簽上】
```<a data-toggle="modal" data-target="#adminModal">機(jī)構(gòu)</a>```
只要target指向的id正確,就可以成功打開modal框。
**第二種打開方式:**
給某個綁定的元素添加class,【l例如在button或者a標(biāo)簽上】
```<a class="adminA">機(jī)構(gòu)</a>```
然后寫js為它添加點(diǎn)擊事件:
```$(".adminA").click(function(){
$('#adminModal').modal("show");
});