使用css和jquery创建模态弹窗

今天自己尝试做了一下模态弹窗的样式，把代码贴在这里供以后复习。
1、布局主要使用flex布局。
2、毛玻璃效果和条纹背景的代码参考《css揭秘》。
3、弹窗的样式参考jquery-ui的弹窗样式。

一、模态弹窗

1、html部分

<!-- 这是一个普通的按钮，用来触发弹窗显示。 -->
<button id="alert-window" class="btn" type="button">弹窗</button>
<!-- 这是一个普通的文本框，用来验证模态效果。 -->
<input>
<!-- **************下面是弹窗的主体代码************* -->
<!-- dialog-1: 在按钮触发时通过id指定触发哪个弹窗。overlay: 指示遮罩层元素 -->
  <div id="dialog-1" class="overlay">
    <!-- dialog：指示弹窗窗体。 -->
  	<div class="dialog">
  		<!-- dialog-header：指示弹窗头部。 -->
	  	<div class="dialog-header">
	  	    <!-- dialog-title：指示弹窗标题。 -->
	  		<div class="dialog-title">这是弹框标题</div>
	  		<!-- dialog-close-icon：指示关闭按钮样式。dialog-close：指示关闭弹窗触发器 -->
	  		<div class="dialog-close-icon dialog-close"></div>
	  	</div>
	  	<!-- dialog-content：指示弹窗内容。 -->
	  	<div class="dialog-content">
	  		这是弹框内容
	  	</div>
	  	<!-- dialog-footer：指示弹窗底部。 -->
	  	<div class="dialog-footer">
	  	    <!-- btn：指示普通按钮样式。dialog-close：指示关闭弹窗触发器。 -->
	  		<button class="btn dialog-close">OK</button>
	  		<button class="btn">cancel</button>
	  	</div>
	</div>
  </div>

2、css部分

	<style type="text/css">
		/* 遮罩层 */
		.overlay {
			position: fixed; /* 将遮罩层铺满整个屏幕 */
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: #abababcc; /* 设置遮罩层背景色为有点透明的浅灰色 */
			display: none; /* 设置遮罩层默认不显示 */
			justify-content: center; /* 设置弹窗左右居中 */
		}
		/* 弹出窗 */
		.dialog {
			z-index: 1; /* 为弹窗指定更高的z-index，以便绘制在遮罩层的上层 */
			width: 400px; /* 设置弹窗宽度 */
			height: 350px; /* 设置弹窗高度 */
			background: #fff; /* 设置弹窗背景色为白色 */
			align-self: center; /* 设置弹窗上下居中 */
			display: flex; /* 设置弹窗内布局为flex布局 */
			flex-direction: column; /* 设置弹窗内flex布局方向为垂直方向 */
			border-radius: 4px; /* 设置弹窗有4px的圆角 */
		}
		.dialog-header {
			background: #ccc; /* 设置弹窗头部的背景色为灰色 */
			display: flex; /* 设置弹窗头部的布局为flex布局 */
			margin: .2em; /* 设置弹窗头部的外边距 */
			padding: .2em .2em .2em .5em; /* 设置弹窗头部的内边距 */
			height: 2.5em; /* 设置弹窗头部的高度 */
			border-radius: 3px; /* 设置弹窗头部的圆角 */
			align-items: center; /* 设置弹窗头部的内容上下居中 */
		}
		.dialog-header .dialog-title {
			flex-grow: 1; /* 设置弹窗头部的标题部分充满剩余空间 */
		}
		.dialog-header .dialog-close-icon {
			background: #e6e6e6; /* 设置弹窗头部的关闭按钮背景色 */
			padding: .1em .35em; /* 设置弹窗头部的关闭按钮内边距 */
			margin-right: .2em; /* 设置弹窗头部的外边距 */
			cursor: pointer; /* 设置弹窗头部的关闭按钮的鼠标样式 */
			border-radius: 3px; /* 设置弹窗头部的关闭按钮的圆角 */
		}
		.dialog-header .dialog-close-icon:hover {
			background: #666; /* 设置弹窗头部的关闭按钮鼠标悬浮背景色 */
		}
		.dialog-header .dialog-close-icon:after { /* 设置弹窗头部的关闭按钮的内容（x） */
			content: "\d7";
			font-size: 1.2em;
			color: #666;
		}
		.dialog-header .dialog-close-icon:hover:after {
			color: #fff;
		}
		.dialog-content {
			flex-grow: 1; /* 设置弹窗内容部分充满剩余空间 */
			margin: 0 .2em; /* 设置弹窗内容部分的外边距 */
		}
		.dialog-footer {
			border-style: solid; /* 设置弹窗底部的边框样式为实线 */
			border-width: 1px 0 0; /* 设置弹窗底部只有上边框 */
			padding: .5em; /* 设置弹窗底部的内边距 */
			margin: 0 .2em; /* 设置弹窗底部的外边距 */
			display: flex; /* 设置弹窗底部的布局为flex布局 */
			justify-content: flex-end; /* 设置弹窗底部的内容右对齐 */
		}
		.dialog-footer .btn{ /* 设置弹窗底部的按钮样式 */
			font-size: medium;
			width: 5em;
			margin: .2em .5em;
			padding: .5em;
		}
		.btn { /* 设置按钮样式 */
			border: 0;
			border-radius: 3px;
			padding: 1em;
			font-size: large;
			background: #ccc;
			width: 8em;
		}
		.btn:hover { /* 设置按钮的悬浮样式 */
			background: #666;
			color: #fff;
			cursor: pointer;
		}
	</style>

3、js部分

下面是需要在初始时添加的js代码：

  <script type="text/javascript">
    // 弹出弹窗的方法，参数为class为overlay的元素id。
  	function openDialog(dialogId){
  	    //设置遮罩层为flex布局，显示遮罩层和弹窗。
  		$("#"+dialogId+"").css("display", "flex"); 
  	}
  	// 关闭弹窗的事件处理。为想要关闭弹窗的按钮添加'dialog'类即可。
  	$(".dialog-close").click(function(){
  		//找到当前关闭弹窗按钮所在的遮罩层，并隐藏。
  		$(this).parents(".overlay").hide(); 
  	});
  </script>

下面是需要在指定弹窗按钮时添加的js代码：

  <script type="text/javascript">
    // alert-window：点击后显示弹框的元素id。
    // dialog-1：弹框遮罩层元素的id。
  	$("#alert-window").click(function(){
  		openDialog("dialog-1");
  	});
  </script>

4、最终效果：

二、毛玻璃背景效果

1、html部分

  /* 注意要使用dialog-background元素把除了弹框部分的内容包裹起来。 */
  <div class="dialog-background">
  	<button id="alert-window" class="btn" type="button">弹窗</button>
  	<input>
  	/* 引入色彩丰富的图片来展示毛玻璃效果。 */
  	<img src="./bg.PNG">
  </div>
  
  	<div id="dialog-1" class="dialog">
	  	<div class="dialog-header">
	  		<div class="dialog-title">
	  			这是弹框标题
	  		</div>
	  		<div class="dialog-close-icon dialog-close"></div>
	  	</div>
	  	<div class="dialog-content">
	  		这是弹框内容
	  	</div>
	  	<div class="dialog-footer">
	  		<button class="btn dialog-close">OK</button>
	  		<button class="btn">cancel</button>
	  	</div>
	</div>

2、css部分

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		/* 毛玻璃效果的背景 */
		.dialog-background {
			transition: .1s filter; /* 毛玻璃效果的渐变时间 */
		}
		.dialog-background.de-emphasized {
			filter: blur(3px) contrast(.8) brightness(.8);/* 毛玻璃效果的滤镜 */
		}
		/* 弹出窗 */
		.dialog {
			z-index: 1;
			position: absolute;
			top: 80px;
			left: 35%;
			width: 400px;
			height: 350px;
			background: #fff;
			display: none;
			flex-direction: column;
			border-radius: 4px;
		}
		.dialog-header {
			background: #ccc;
			display: flex;
			margin: .2em;
			padding: .2em .2em .2em .5em;
			height: 2.5em;
			border-radius: 3px;
			align-items: center;
		}
		.dialog-header .dialog-title {
			flex-grow: 1;
		}
		.dialog-header .dialog-close-icon {
			background: #e6e6e6;
			padding: .1em .35em;
			margin-right: .2em;
			cursor: pointer;
			border-radius: 3px;
		}
		.dialog-header .dialog-close-icon:hover {
			background: #666;
		}
		.dialog-header .dialog-close-icon:after {
			content: "\d7";
			font-size: 1.2em;
			color: #666;
		}
		.dialog-header .dialog-close-icon:hover:after {
			color: #fff;
		}
		.dialog-content {
			flex-grow: 1;
			margin: 0 .2em;
		}
		.dialog-footer {
			border-style: solid;
			border-width: 1px 0 0;
			padding: .5em;
			margin: 0 .2em;
			display: flex;
			justify-content: flex-end;
		}
		.dialog-footer .btn{
			font-size: medium;
			width: 5em;
			margin: .2em .5em;
			padding: .5em;
		}
		.btn {
			border: 0;
			border-radius: 3px;
			padding: 1em;
			font-size: large;
			background: #ccc;
			width: 8em;
		}
		.btn:hover {
			background: #666;
			color: #fff;
			cursor: pointer;
		}
	</style>

3、js部分

  <script type="text/javascript">
    // 点击id为alert-window的按钮后显示弹窗。
  	$("#alert-window").click(function(){
  		openDialog("dialog-1");
  		$(".dialog-background").addClass("de-emphasized");
  	});
  	// 显示弹窗的方法。
  	function openDialog(dialogId){
  		$("#"+dialogId+"").css("display", "flex");
  	}
  	// 为所有dialog-close的元素添加关闭弹窗的事件。
  	$(".dialog-close").click(function(){
  		$(this).parents(".dialog").hide();
  		$(".dialog-background").removeClass("de-emphasized");
  	});
  </script>

4、实际效果

三、斜条纹效果

斜条纹效果的弹窗只是改变了一下模态框的背景色而已，所以把模态框的背景改成下面的代码就可以啦。（《css揭秘》提供的这个生成斜条纹的方法真是好用。）

			/* 设置斜条纹颜色 */
			background: #aab;
			/* 设置斜条纹样式 */
			background-image: repeating-linear-gradient(30deg,
							  	hsla(0, 0%, 100%, .1),
							  	hsla(0, 0%, 100%, .1) 15px,
							  	transparent 0, transparent 30px);

最终效果: