Bootstrap框架实现简易的模态框

知识分子没文化
2021-04-16 / 0 评论 / 250 阅读 / 正在检测是否收录...

目录:

一、模态框的简单介绍

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

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

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

简单结构大概是这样:

01

二、代码实现

导入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)

0

评论 (0)

取消