模态框 modal data-toggle data-target
1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类)
2. 关闭所有data事件$(document).off(“.data-api”);
关闭某个data事件$(document).off(“.button.data-api”)
3. 接受三种不同类型的参数：
$(‘#myModal’).modal()
$(‘#myModal’).modal({keyboard:false})
$(‘#myModal).modal(‘show’)
4. 事件：$(‘#myModal’).on(‘show.bs.modal’,function(e){…})
获取版本信息：$.fn.tooltip.Constructor.VERSION
5. Modal>modal-dialog>modal-content>modal-header(>modal-title)+modal-body+modal-footer
模态框大小modal-lg(大) modal-sm(小) 默认表示正常
Data属性:data-toggle=”modal” data-target=” #ID(.类)”
6. data-backdrop (true[单击黑色背景会关闭当前弹窗] false[单击不变背景并不会关闭当前弹窗] static[单击黑色背景并不会关闭当前弹窗]])
Data-keyboard(true[不变背景按ESC按不会关闭当前弹窗] false[黑色背景按ESC会关闭当前弹窗])
Data-show显示当前模态窗
<div class="container">
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal-lg" data-backdrop="static">大对话框 </button>
<div class="modal fade" id="myModal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span aria-hidden="true">× </span>
</button>
<h4 class="modal-title">大对话框 </h4>
</div>
<div class="modal-body">
<p>在弹出框显示的过程会有一个过渡效果大对话框宽度 </p>
</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>
</div>
</div>
<a href="#" id="btnDialog">小对话框 </a>
<div class="modal fade" id="myModal-sm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span aria-hidden="true">× </span>
</button>
<h4 class="modal-title">小对话框 </h4>
</div>
<div class="modal-body">
<p>在弹出框显示的过程会有一个过渡效果小对话框宽度 </p>
</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>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.2.3.min.js" > </script>
<script type="text/javascript" src="js/bootstrap.min.js" > </script>
<script language="JavaScript">
$(document).ready(function(){
$('#btnDialog').click(function(){
$('#myModal-sm').modal({
backdrop:"static"
});
});
});
</script>
7. 事件 show.bs.modal在模态框弹出前执行 shown.sb.modal在模态框弹出后执行
Hide.bs.modal在模态框隐藏前执行 hidden.bs.modal在模态框隐藏后执行
$(‘#myModal-sm’).modal(“toggle”) $(‘#myModal-sm’).modal(“show”)
$(‘#myModal-sm’).on(‘show.sb.modal’,function(e){
Alert(“show.bs.modal”);
});
8. 下拉菜单绑定事件 $(‘#dropMenu’).dropdown(“toggle”);
事件: show.bs.dropdown shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown
$(‘#.dropdown’).on(‘show.sb.modal’,function(){
Alert(“show.bs.dropdown”);
});
https://www.cnblogs.com/xszjk/articles/5517937.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/112384.html原文链接：https://javaforall.net
