使用Bootstrap的JavaScript模态框插件可以为网站添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互。同时比如一些不想分成多个页面的功能，也可以点击弹出登陆框、验证框等都是很棒的选择。

先看一下官方给出的示例代码

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

如果是熟悉前端的朋友肯定看的就很清楚，其实实现的就是在页面有一个按钮，点击这个按钮，弹出一个新的框。然后显示下面的内容。 页面上有关闭的功能，还有下面的确认等按钮。这样就很方便了。接下来我们来根据这个样例改成一个我们自己的登陆弹出功能吧。 这里我们还需要用到bootstarp4的表单（Form）组件配合 先看看最终的样式

分析

要动手之前先搞清楚他们之间的关系，为什么点击了按钮，框就会弹出来，弹出来的结构又是怎么划分的？这些问题都搞清楚了，就比较好弄了。 在两个最父级的button和div上可以看到div有一个id是exampleModal,而在button上又有一个data-target="#exampleModal" 然后在弹出的div里面还有2个属性aria-labelledby="exampleModalLabel"和里面的id="exampleModalLabel"在搞懂了关系后，那么大致的意思就是 点击拥有data-target="#loginModal"属性的按钮时，bootstarp4会帮我们在页面寻找是否有id="loginModal"的div模态框，在找到后就会显示。 显示的内容这些都是标准的，一般不需要大改。主要需要注意的就是里面的几个css类modal-header、modal-body、modal-footer. 可以理解为，头部就是模态框的最上面显示的左边的标题和右边的一个关闭的x，底部就是右下角有取消、登陆的两个按钮。而中间，我们只要嵌入一个form表单即可解决。

动手实践

<!-- 模态框-登陆按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
    登陆
</button>

<!-- 模态框-弹出界面 -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModalLabel">登陆站点</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">邮箱&手机号</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                               placeholder="Enter email">
                        <small id="emailHelp" class="form-text text-muted">我们将会对您的信息进行保密</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">7天不用登陆</label>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">登 陆</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

就可以实现了，当然做这些之前，一定要先引入好需要引入的文件。