BootStrap模态框组件具体使用教程

BootStrap模态框组件具体使用教程

模态框作为一个很重要的组件 具体使用 如下

首先 模态框的触发 可能是一个按钮 链接 或 一个事件

1.以按钮为例 标签式触发

定义一个按钮 这个按钮将是触发模态框

<button  id="btn"  class="btn btn-primary">模态框按钮</button>

然后定义模态框

首先定义一个p class为modal show为显示 fade淡入淡出 定义id

内层p class为modal-dialog 定义窗体

内层p class为modal-content 定义内容

内层p class为modal-header 在这一层h标签 class为modal-title

在tile中定义关闭按钮

内层p class为modal-body 定义身体

内层p class为modal-footer 定义脚部

按钮触发：

在btn中添加 data-toggle=modal data-target=’#myModal’

基本完成

在button中还可添加如下属性 完成一些操作

data-backdrop true/false/’static’ 背景是灰色 点击背景模态框是否消失

data-keyboard true/false 按下esc是否关闭

href 远程的模态框内容

基本代码 如下：

 <button id="btn" class="btn btn-primary" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#myModal">模态框按钮</button>

    <p class="modal fade" id="myModal">
        <p class="modal-dialog">
            <p class="modal-content">
                <p class="modal-header">
                    <h4 class="modal-title">
                       <span class="close" data-dismiss="modal">&times;</span>
                        模态框的标题
                    </h4>
                </p>
                <p class="modal-body">
                    模态框的身体
                </p>
                <p class="modal-footer">
                    模态框的脚部
                </p>
            </p>
        </p>

    </p>

上面介绍完了标签版本的 下面用js控制的

**2.**js控制模态框

首先 基本标签不变 btn标签将无用的属性去除 就是一个普通标签

<button id="btn" class="btn btn-primary" >模态框按钮</button>

然后写 js

事件是 模态框.modal()

可以直接 在modal(‘show’)显示 modal(‘hide’)隐藏

也可以

  [class为modal的p元素].modal({
        //其中的属性有：
        show:  true/false,  显示还是隐藏 
        backdrop: true/false/'static', 点击背景是否关闭
        keyboard: true/false   按下esc是否关闭
        remote: url   加载远程ul的模态框内容
       })

用js目的就是 遇到事件触发模态框，不仅限于按钮 现在用点击按钮模拟事件

具体代码如下：

<button id="btn" class="btn btn-primary" >模态框按钮</button>

    <p class="modal fade" id="myModal">
        <p class="modal-dialog">
            <p class="modal-content">
                <p class="modal-header">
                    <h4 class="modal-title">
                       <span class="close" data-dismiss="modal">&times;</span>
                        模态框的标题
                    </h4>
                </p>
                <p class="modal-body">
                    模态框的身体
                </p>
                <p class="modal-footer">
                    模态框的脚部
                </p>
            </p>
        </p>

    </p>


    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="/js/jquery-3.2.1.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $("#btn").on('click',function(){
        $('#myModal').modal({
            show:true,
            backdrop:'static',
            keyboard:false
        })
    })
</script>

最后：触发事件 用的时候再过来取