Bootstrap基础-模态弹出框_bootstrap modal-dialog-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39913441/article/details/98503164

1. Bootstrap基础-模态弹出框

Bootstrap框架中的模态弹出框，分别运用了"modal"、“modal-dialog” 和 “modal-content” 样式，而弹出窗真正的内容都防止在"modal-content" 中，其主要又包括三个部分：

弹出框头部，modal-header，包括标题和关闭按钮；
弹出框主体，modal-body，弹出框的主要内容；
弹出框脚步，modal-footer，主要防止操作按钮；

1.1 触发模态弹出窗的方式

模态弹出窗声明，自定义两个必要的属性：data-toggle=“modal”, data-target=“弹出窗的?值”;
可用链接a自带的属性href来代替data-target,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JSmin/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="JSmin/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css" />
	</head>
	<body>
		<!-- data-toggle指以什么事件触发，常用的如collapse,modal,popover,tooltips等；
data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示。 -->
		<h1>模态弹出框</h1>
		<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal" data-backdrop="static">点击我会弹出模态框</button>
		
		<a href="#mymodal" data-toggle="modal" class="btn btn-primary">点击我这个链接也会弹出模态框</a>
		
		<button class="btn btn-primary" id="btn-js">单击我会利用JS来弹出模态弹出框</button>

		<div class="modal fade" id="mymodal">
		<!-- modal-dialog水平居中 -->
			<div class="modal-dialog modal-sm">
				<div class="modal-content ">
					<div class="modal-header">
						<!-- 给一个元素data-dimiss属性的话，可以通过点击该元素达到让目标消失的效果。 -->
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span>
							<span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">模态弹出窗标题</h4>
					</div>
					<div class="modal-body">
						<p>模态弹出窗主体内容</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal">关闭</button>
						<button class="btn btn-primary" data-dismiss="modal">保存</button>
					</div>
				</div>
			</div>
		</div>


		<script type="text/javascript">
			$('#btn-js').click(function() {
				$('#mymodal').modal({
					backdrop: "static"
					//等同于data-backdrop，如果设置为true，则单击该背景时，
					//模态弹出窗会关闭；如果设置为false，则单击该背景时，
					//模态弹出窗不会关闭
				})
			})
		</script>	
	</body>
</html>

在这里插入图片描述