bootstrap模态框

最新推荐文章于 2024-04-07 16:07:54 发布

笑看风云不留痕

最新推荐文章于 2024-04-07 16:07:54 发布

阅读量158

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_39432715/article/details/108977469

版权

1.导入bootatrap

在这里插入图片描述

    <link rel="stylesheet" href="../lib/bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>

2.例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框测试</title>
    <link rel="stylesheet" href="../lib/bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <h2>创建模态框（Modal）</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
        data-backdrop="false" data-keyboard="false" style="min-height:500px">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">在这里添加一些文本</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script>

    </script>
</body>

</html>

3.具体解释

1.触发器button

data-toggle="modal"//定义为触发器
data-target="#myModal"/触发哪个模态框

2.模态框

id="myModal"//和触发器一样的id
tabindex="-1"//弹出的层级
role="dialog"//这个默认给加上
aria-labelledby="myModalLabel"//引用模态框的标题，和下面class="modal-header"的div下面的一个元素id对应
aria-hidden="true"//保持隐藏，直到点击触发器为止
data-backdrop="false" //关闭遮罩层模态框
data-keyboard="false"//键盘摁esc不能关闭模态框

3.模态框下面的组成

		<div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"></div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                </div>
            </div>
        </div>

4.头里面放的东西

1.标题，这个id和前面的aria-labelledby="myModalLabel"一致
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
2.关闭叉号
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

5.其他里面放的东西

data-dismiss="modal"//比如按钮之类的触发器加入这个标签后会隐藏模态框
style="height:900px;"//调整高度放在class="modal-content" 的div后面

6.js操作

笑看风云不留痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap模态框

1.导入bootatrap <link rel="stylesheet" href="../lib/bootstrap-4.5.0-dist/css/bootstrap.min.css"> <script src="../lib/jquery.min.js"></script> <script src="../lib/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
复制链接

扫一扫