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>

<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>

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