Bootstrap模态框
<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 模态框 -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- 模态内容 -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
效果如下:
一些说明:
Trigger的部分
为打开模态框,需要一个button或者link,需要包括2个data-*
属性:
data-toggle="modal"
表示打开一个模态框data-target="#myModal"
表示model的id
Modal的部分
<div>
模态必须有一个id
的值与data-target
一致- 类
.modal
,用来把<div>
的内容识别为模态框 - 类
.fade
,当模态框被切换时,它会引起内容淡入淡出 role="dialog"
提高了使用屏幕阅读器的人的可访问性.modal-dialog
设置模态的适当宽度和边距modal-header
是为模态窗口的头部定义样式的类modal-body
用于为模态窗口的主体设置样式modal-footer
用于为模态窗口的底部设置样式data-dismiss="modal"
,是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口
模态框的大小
可通过modal-sm
和modal-lg
,设置模态框的大小
Bootstrap JS Modal
通过按钮来触发弹出模态框
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
选项
1.backdrop
,默认为true
,有dark的覆盖层,为false,则没有覆盖层,为static
时,点击modal外的地方,则不能关闭模态框
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal({backdrop: true});
});
$("#myBtn2").click(function(){
$("#myModal2").modal({backdrop: false});
});
$("#myBtn3").click(function(){
$("#myModal3").modal({backdrop: "static"});
});
});
2.keyboard
,默认为true
,当按下 escape
键时关闭模态框,设置为 false
时则按键无效。
3.show
,默认为true
,表示实例化时展示模态框
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal({show: true});
});
$("#myBtn2").click(function(){
$("#myModal2").modal({show: false});
});
});
</script>
方法
1..modal(options)
把内容作为模态框激活。接受一个可选的选项对象
2..modal('toggle')
手动切换模态框
3..modal('show')
手动打开模态框。
4..modal('hide')
手动隐藏模态框