Bootstrap框架实现简易的模态框

目录：

• 一、模态框的简单介绍
• 二、代码实现
  • 1.HTML代码
  • 2.CSS代码

一、模态框的简单介绍

点击按钮以查看实现效果：

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独来源的内容，使用户可以在不离开父窗体的情况下有一些互动，比如提供信息、交互等。

简单来说，模态框是一个div，包含“modal-header”（模态框头部）、“modal-body”（模态框主体）、“modal-footer”（模态框底部）三个子元素。

简单结构大概是这样：

二、代码实现

导入jQuery和Bootstrap：

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">
</script><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

1.HTML代码

<h2>Bootstrap框架实现简易的模态框</h2>
<!-- 触发模态框的按钮  data-target的值是要加载的模态框 -->
<button class="click btn btn-primary" data-toggle="modal" data-target="#showModal">点击显示模态框</button>
<!-- modal属性用于把div识别为模态框窗口，fade是可以设置模态框淡入淡出  aria-labelledby的值是模态框的标题
    aria-hidden="true"用于保持模态窗口不可见，直到触发器（比如按钮）被触发为止-->
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="titleModal" aria-hidden="true">
    <!-- modal-dialog 设置弹出层  弹出效果-->
    <div class="modal-dialog">
        <!-- 模态框的底层 -->
        <div class="modal-content">
            <!-- 模态框头部-->
            <div class="modal-header">
                <!-- 关闭按钮 data-dismiss="modal"用来关闭窗口 -->
                <button class="close" data-dismiss="modal" aria-hidden="true">
                <!-- &times 转义成“x”关闭符号  -->
                    &times;
                </button>
                <!-- 模态框标题 -->
                <h4 class="modal-title" id="titleModal">Roookie博客 | 记录 · 收纳 · 分享</h4>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <br><a href="https://www.langp.wang">
                <img src="https://gitee.com/wang-langping/langp/raw/master/icon/1.png" alt="网络连接失败，请检查网络连接">
                </a>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <!-- 模态框底部的操作按钮 -->
                <button class="btn btn-info" data-dismiss="modal">确定</button>
                <button class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

2.CSS代码

h2,h4,.modal-body{
    text-align:center;
}
.click{
    display:block;
    padding:10px;
    margin:30px auto;
}

更多内容： Bootstrap 模态框（Modal）插件 | 菜鸟教程 (runoob.com)