【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:;

}

　　然后为modal加上这个class即可。

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

　　问题2：

　　　　怎么关闭modal?

　　解决方法：

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

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

　　　　

【bootstrap】modal模态框的几种打开方法+问题集锦的相关教程结束。