当前位置: article > 正文
bootstrap模态窗_bootstrap 模态窗口右侧

作者：盐析白兔 | 2024-02-14 18:05:09
踩
bootstrap 模态窗口右侧
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="../day24/jquery-ui/jquery-3.1.0.js"></script>
    <!--1.部分组件和全部的插件必须引入JS文件。2.bootstrap的js文件必须在jQuery的文件后引入。3.bootstrap要求jQuery版本不低于1.9-->
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <button type="button" id="open" class="btn btn-success">打开模态窗</button>
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal">不用JS打开模态窗</button>
    <!--bootstrap模态窗开始-->
    <!--顶级包裹元素-->
    <div id="modal" class="modal fade" data-backdrop="static" data-keyboard="false">
        <!--窗口包裹元素-->
        <div class="modal-dialog">
            <!--内容包裹元素-->
            <div class="modal-content">
                <!--窗口标题-->
                <div class="modal-header">
                    <!--属性名以data开头的都表示自定义属性，是HTML5的规范中新增的规范-->
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">测试弹出窗</h4>
                </div>
                <!--主体内容-->
                <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                            <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                            <span class="sr-only">60% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>
                </div>
                <!--窗口底部-->
                <div class="modal-footer">
                    <input type="button" value="取消" id="close" class="btn btn-default">
                    <a href="javascript:;" class="btn btn-primary" data-dismiss="modal">确定</a>
                </div>
            </div>
        </div>
    </div>
    <!--bootstrap模态窗结束-->
</body>
<script>
    $(function () {
       $("#open").click(function () {
           $("#modal").modal({
               backdrop:'static',/*设置点击模态窗外面不关闭窗口*/
               keyboard:false/*设置esc不关闭窗口*/
           });
       });
       $("#close").click(function () {
           $("#modal").modal("hide");
       });
       /*监听模态窗打开事件*/
        $("#modal").on("show.bs.modal",function (ev) {
            console.log("show被触发");
            /*获取触发模态窗的按钮*/
            let btn=ev.relatedTarget;
            /*获取按钮的文字*/
            let text=$(btn).text();
            /*设置模态窗标题*/
            $(".modal-title").text(text);
        });
        $("#modal").on("shown.bs.modal",function () {
            console.log("shown被触发");
        });
        $("#modal").on("hide.bs.modal",function () {
            console.log("hide被触发");
        });
        $("#modal").on("hidden.bs.modal",function () {
            console.log("hidden被触发");
        });
    });
</script>
</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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/80948?site