bootstrap-modal使用方法

2016-03-02    编辑:kp12345     点击(
本文章来给各位同学介绍关于bootstrap-modal使用方法,希望此方法对各位有所帮助。

一般在两种html元素上调用,按钮和超链接。

 代码如下 复制代码

<input type="button" data-toggle="modal" data-target="#tree" class="btn" value="点我选择">
<a data-toggle="modal" href="#regulation">查看工号规则</a>

标准的modal层:

 代码如下 复制代码

    <div class="modal" id="myModal">
    <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>对话框标题</h3>
    </div>
    <div class="modal-body">
    <p>对话框内容</p>
    </div>
    <div class="modal-footer">
    <a href="#" class="btn">关闭</a>
    <a href="#" class="btn btn-primary">保存更新</a>
    </div>
    </div>

其中任何一块都可以去掉,关闭层,需要添加data-dismiss=”modal”,例如footer关闭按钮,添加这句,就生效了