bootstrap模态框

作者：很楠不爱3 | 2024-02-14 17:46:20

踩

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>
1
2
3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

3.具体解释

1.触发器button

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

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不能关闭模态框
1
2
3
4
5
6
7

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>
1
2
3
4
5
6
7
8

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>
1
2
3
4

5.其他里面放的东西

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

6.js操作

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】