【bootstrap】modal模態框的幾種打開方法+問題集錦

第一部分：

　　關於bootstrap中modal的使用，下面把幾種自己用的打開方法展示出來

　　首先呢，得有個Bootstrap的頁面，這里就不說了。

　　其次呢，得有個modal放在頁面中，不管你這段代碼加在頁面代碼的什么地方，默認是不會顯示出來的　

 <div class="modal fade modalIndex" id="adminModal"  role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">機構篩選</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>
            </div>
        </div>

　　最后呢，就是下面的幾種打開方式：

　　第一種打開方式：

　　在某個綁定的元素上添加下面兩個屬性【例如在button或者a標簽上】

<a data-toggle="modal" data-target="#adminModal">機構</a>

　　只要target指向的id正確，就可以成功打開modal框。

 

　　第二種打開方式：

　　給某個綁定的元素添加class,【l例如在button或者a標簽上】

<a class="adminA">機構</a>

　　然后寫js為它添加點擊事件：

$(".adminA").click(function(){
        $('#adminModal').modal("show");
    });

 

第二部分：

　　使用過程中出現的一些問題集錦

　　問題1：打開的Modal模態框位於頁面上圖層div的下面

　　解決方法：

　　為Modal指定z-index,即可解決

.modalIndex{
            z-index: 999;
}

　　然后為modal加上這個class即可。

 =======================================================

　　問題2：

　　　　怎么關閉modal?

　　解決方法：

$('#adminModal').modal('hide');

=======================================================