本节知识点
- 基本使用
- 用法说明
(一)基本使用
- 使用模态框的弹窗组件需要三层DIV容器元素，分别是modal(模态声明层) dialog(窗口声明层)content(内容层)
- 在内容层里面又分为header(头部),body(主体),footer(注脚)
<div class="modal show" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close">X</button>
<p class="modal-title">这个就是标题</p>
</div>
<div class="modal-body">
这个就是模拟框的内容
</div>
<div class="modal-footer">
<button class="btn btn-primary">注册</button>
<button class="btn btn-success">登录</button>
</div>
</div>
</div>
</div>
(二) 模态框自动隐藏，点击后显示
- data-toggle="modal" data-target="#modal1"
- id随意起名字
<button class="btn btn-primary" data-toggle="modal"data-target="#modal1">点击我显示</button>
<div class="modal " tabindex="-1" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close">X</button>
<p class="modal-title">这个就是标题</p>
</div>
<div class="modal-body">
这个就是模拟框的内容
</div>
<div class="modal-footer">
<button class="btn btn-primary">注册</button>
<button class="btn btn-success">登录</button>
</div>
</div>
</div>
</div>
(三) 弹窗的大小
- modal-lg
- sm-lg
<div class="modal-dialog modal-lg"></div>
<div class="modal-dialog sm-lg"></div>
(四)可设置淡入淡出的效果
- class="fade"
<div class="modal fade" tabindex="-1" id="modal1">
(四) 在主体部分使用栅格系统
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</div>
(五) 用法
- 第一种 data属性
data-toggle 表示触发的类型
data-target 表示触发的节点
data-backdrop 布尔或者static 默认就是true表示有遮罩层，要是false就表示没有.要是设置static就表示单击模态框以外的地方他也不消失
data-keyboard 布尔值 true 如果是true按esc则消失窗口 要是false就不消失
data-show 布尔值 默认就是true 要是true上来就显示，要是false上来就隐藏
href url路径 要是路径就在modal-content里面加载一次，要是#就取代data-target方法
data-toggle = " modal" data-target = "#modal1"
data-keyboard = "false"
data-show = "false"
href="index.html"
- 第二种Jquery里面设置
$("#mymodal").modal({
show: true,
backdrop : false,
keyboard : false,
remote : "index.html"
})
- 方法
toggle .modal('toggle'); 触发时反转切换状态
show .modal("show"); 触发时显示弹窗
hide .modal("hide"); 触发时关闭弹窗
$("#btn1").on('click',function(){
$("#modal").modal("show");
})
点击一个按钮弹出来一个模态框由上到下。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
