Bootstrap入门（二十三）JS插件1：模态框

Bootstrap入门（二十三）JS插件1：模态框

1.静态实例

2.动态实例

3.模态框的尺寸和效果

4.包含表单的模态框

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。

但是千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

首先我们要引入CSS文件和JS文件（bootstrap需要jQuery的支持）

<link href="bootstrap.min.css" rel="stylesheet">

<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

1.静态实例

首先我们要创建一个class为modal的div

在里面再创建一个class为modal-dialog的div（这才是模态框）

模态框是分为头部，身体，和脚部

再创建一个class为modal-content的div，为内容部分

我们再创建一个身体部分，假设内容为hello world

        <div class="modal" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallable" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">                    
                    <div class="modal-body">
                        hello world
                    </div>                    
                </div>
            </div>
        </div>

当然，如果直接这样的话是没有任何效果的，这就是我们需要JS的时候

添加一段新的js代码（这里是用到了模态框代码的id：mymodal，可以根据自己需要修改）

（注意：使用id时，需要在前面加上“#”，不然同样是没有效果的）

　　　　 <script>
            $("#mymodal").modal("show");
        </script>

这样，我们就有效果了，背景变成灰色，弹出模态框

当然，这跟我们平时看到的不一样，那是因为还缺少了头部和脚部

补全代码，用<span>来承载那个“X”，用按钮的不同情境来显示效果

        <div class="modal" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallable" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="model-title" id="mymodallabel">这里是头部</h4>
                    </div>                 
                    <div class="modal-body">
                        hello world
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                        <button type="button" class="btn btn-primary">save</button>
                    </div>
                </div>
            </div>
        </div>

刷新页面，新弹出的模态框，可以按“X”或者按钮close关闭

效果：

2.动态实例

静态实例是一进入页面就弹出来的，可是一般都不会这样，

因为事实上肯定是通过一些按钮，控件来触发的

我们添加一个按钮（这里是一个正常、稍大的样式）

注意按钮里面的data-target="#mymodal"

　　　　 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal">
            启动模态框
        </button>

刷新页面，在点击按钮后，弹出模态框，效果

3.模态框的尺寸和效果

模态框提供了三个可选尺寸（有大的，默认的，小的），通过为 .modal-dialog 增加一个样式调整类实现

同时也有份有过渡效果和没过渡效果的（只需要在class中添加或者去掉fade就可以了）

2里面的就是默认的，接下来，假设：大的，有过度效果；小的，没有过度效果

为方便，只写一点

　　　　 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
            启动大模态框
        </button>
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mylargemodallabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">大 有过渡</div>
            </div>
        </div>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
            启动小模态框
        </button>
        <div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mylargemodallabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">小 无过渡</div>
            </div>
        </div>

效果，大的明显大很多，有过渡效果的是渐渐出现的，没有过度效果的是突然出现的

4.包含表单的模态框

依然是用按钮来触发，在按钮的属性中，注意data-target="#examplemodal" 和data-whatever="@ding"

data-target="#examplemodal"是对模态框所在div的调用

data-whatever="@ding"是指获取的内容是@ding

<h4>标签也有自己的id：examplemodallable

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#examplemodal" data-whatever="@ding">
            open modal for @ding
        </button>
        <div class="modal fade" id="examplemodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="examplemodallable">message</h4>
                    </div>
                    <div class='modal-body'>
                        <form>
                            <div class='form-group'>
                                <label for='recipient-name' class='control-label'>ASD</label>
                                <input class="form-control" type="text" id='recipient-name'>
                            </div>
                        </form>
                    </div>
                    <div class='modal-footer'>
                        <button type="button" class='btn btn-default' data-dismiss='modal'>close</button>
                        <button type="button" class='btn btn-primary'>send</button>
                    </div>
                </div>
            </div>
        </div>

当然，现在的效果不是我们想要的，现在的效果是：

想把data-whatever的内容我们来添加到表单中，新增梯段js代码：

前面是定义变量获取相应的信息

modal.find(".modal-title").text(AAA);（这是头部内容）

modal.find(".modal-body input").val(recipient)）（修改到身体部分的<input>中）

        <script>
            $("#examplemodal").on("show.bs.modal", function (event) {
                var button = $(event.relatedTarget)
                var recipient = button.data("whatever")
                var modal = $(this);
                modal.find(".modal-title").text("new message to" + recipient);
                modal.find(".modal-body input").val(recipient)
            })</script>

刷新页面，重新点击，头部的信息和<input>里面的信息发生了变化

这就很类似用户提示，能提高用户体验