bootstrap的模态框的使用

forwardMyLife

已于 2024-01-01 16:34:03 修改

阅读量1.5w

点赞数 3

分类专栏： bootstrap 文章标签： bootstrap的模态框

于 2019-06-23 18:42:13 首次发布

本文链接：https://blog.csdn.net/lucky_ly/article/details/93386143

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootstrap的模态框

如果只想单独使用模态框功能，可以单独引入modal.js，和bootstrap的css,在bootstrap的包中，可引入bootstrap.js。

用法

通过data属性，比如设置某个butto的data-toggle='“modal”，同时设置 data-target=“#myModal” 选择器内容，
通过js直接用代码 $(‘#myModal’).modal(options)
模态框主要为三部分，model-head,modeal-body,model-footer,主要内容在body中显示，class="close"为一个关闭模态框样式。
几个常用的方法 $(‘#identifier’).modal(‘toggle’) 切换模态框状态
$(‘#identifier’).modal(‘show’) 显示模态框
$(‘#identifier’).modal(‘hide’) 隐藏模态框

事件	作用	用法
show.bs.modal	在调用 show 方法后触发。	$(‘#myModal’).on(‘show.bs.modal’,function () {alert(“显示模态框”);});
shown.bs.modal	在调用 show 方法后触发。	$(‘#myModal’).on(‘shown.bs.modal’, function () {alert(“完全显示模态框”); });
hide.bs.modal	在调用 hide 方法后触发。	$(‘#myModal’).on(‘hide.bs.modal’, function () {alert(“隐藏模态框”);});
hidden.bs.modal	在调用 hide 方法后触发。	$(‘#myModal’).on(‘hidden.bs.modal’, function () {alert(“完全隐藏模态框”); });

实例代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>shiro</title>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script type="text/javascript">
        var basePath = "${pageContext.request.contextPath}";
    </script>
</head>
<body>

<div class="container">


    <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">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        模态框（Modal）标题
                    </h4>
                </div>
                <div class="modal-body">
                    <div>我是模态框</div>
                </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>


</div>


</body>
<script type="text/javascript">



    $('#myModal').on('show.bs.modal', function () {
        alert("显示模态框");
    });

    $('#myModal').on('shown.bs.modal', function () {
        alert("完全显示模态框");
    });

    $('#myModal').on('hide.bs.modal', function () {
        alert("隐藏模态框");
    });

    $('#myModal').on('hidden.bs.modal', function () {
        alert("完全隐藏模态框");
    });


</script>

</html>

在这里插入图片描述