bootstrap插件--模态框(modal)

最新推荐文章于 2023-12-23 11:35:56 发布

小队员

最新推荐文章于 2023-12-23 11:35:56 发布

阅读量548

点赞数 1

分类专栏： JavaScript

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BootStrap模态框插件（Modal）
1、基本介绍
模态框是覆盖在父窗体上的子窗体。通常目的是显示来自一个单独源的内容，可以在不离开父窗体的情
况下有一些互动。子窗体可以提供信息、交互等。
要引用该插件的功能，需要引用bootstrap.js或bootstrap.min.js.
使用模态框的弹窗组件需要3层div容器元素，分别是modal（模态声明层）、dialog（窗口声明层）、
content（内容层）。在内容声明层中又分为三层，分别为header、body、footer。
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-title"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
2、用法说明
所有的插件都是基于Javascript和jQuery的。四要素【用法、参数、方法、事件】
（1）使用方法：
data-toggle表示触发的类型 data-target表示触发的节点
<div class="div1">
<a id="btn_new_file" href="#" data-toggle="modal" data-target="#newFile-modal" >新建文件夹</a>
</div>
（2）参数
可以通过在HTML元素上设置data-*的属性声明来控制效果
data-backdrop:设置背景可以是布尔值或"static"
data-keyboard:设置esc键是否会退出
data-show:初始化时是否显示
href：#开头表示取代data-target方法否则表示url地址并将该内容加载到modal-content中
或者直接在jquery方式声明：
$("#**").modal({//对象字面量
show : true,
backdrop : false,
keyboard : false,
remote : 'index.html'
});
(3)方法
toggle:切换弹窗显示
show :显示弹窗
hide :隐藏弹窗
$("#**").click(function(){
$("#myModal").modal('show');
})
(4)事件
模态框支持4种事件，分别对应弹出前、弹出后、关闭前、关闭后
show.bs.modal(调用show时)
shown.bs.modal（模态框完全显示之后）
hide.bs.modal（调用hide时）
hidden.bs.modal（模态框完全隐藏之后）

$("#muModal").on("show.bs.modal",function(){
alert("调用show方法时立即触发")！

});

3、测试案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap模态框测试</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="div1">
        <a id="btn_new_file" href="#" data-toggle="modal" data-target="#newFile-modal" >新建文件夹</a>
    </div>
    <div class="modal fade" id="newFile-modal" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4 class="modal-title">新建文件夹</h4>
                </div>
                <div class="modal-body">
                    <form style="">
                        <label>名称：</label>
                        <input type="text" placeholder="新建文件夹1" id="contentIn">
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary" id="btn_confirm"><span>确认</span></a>
                    <a href="#" class="btn btn-default" data-dismiss="modal"><span>取消</span></a>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
           $("#btn_confirm").click(function(){
               alert("新建文件夹名称为：" + $("#contentIn").val());
           }) ;
        });
    </script>
</body>
</html>

小队员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap插件--模态框(modal)

BootStrap模态框插件（Modal）1、基本介绍模态框是覆盖在父窗体上的子窗体。通常目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可以提供信息、交互等。要引用该插件的功能，需要引用bootstrap.js或bootstrap.min.js.使用模态框的弹窗组件需要3层div容器元素，分别是modal（模态声明层）、dialog（窗口声明层）、
复制链接

扫一扫