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

2023-08-14 12:13:46

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>里面的信息发生了变化

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

码农公寓

相关文章