Bootstrap JavaScript插件：模态框（modal.js）

最新推荐文章于 2024-08-21 09:17:03 发布

汪末末

最新推荐文章于 2024-08-21 09:17:03 发布

阅读量2.1k

点赞数

分类专栏： # Bootstrap 框架文章标签： bootstrap javascript typescript css html5

本文链接：https://blog.csdn.net/WangMinGirl/article/details/108492454

版权

本文介绍了Bootstrap模态框的基本结构、动态实例、尺寸选择、禁止动画效果以及如何通过data属性和JavaScript调用模态框。模态框不支持嵌套，建议作为body的直接子元素。此外，文章还提到了增强模态框的可访问性和使用模态框的事件监听。

摘要由CSDN通过智能技术生成

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

注意：

模态框不支持嵌套，需要嵌套模态框的话，只能自己手动实现。
模态框包含的html最好尽量作为body的直接子元素，以避免其他组件影响模态框的展现和功能。
弹出层出来以后，页面的滚动条会被覆盖。

模态框主体结构包含了模态框的头、体和一组放置于底部的按钮 :

modal 弹出层父级
modal-dialog 弹出层
modal-content 弹出层的内容区域
modal-header 弹出层的头部区域
modal-body 弹出层的主体区域
modal-footer 弹出层的底部区域
fade 让弹出层有一个运动的效果，加给弹出层父级

基本结构代码如下：

<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">
		     ×
		    </button>
		   </div>
		   <div class="modal-body">
			    code。。。
		   </div><!--modal-body-->
		   <div class="modal-footer">
			   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
		   </div>
<!--modal-footer-->
		</div><!-- modal-content -->
	 </div><!--modal-dialog -->
</div>