录入信息弹窗及点击空白关闭弹窗的简单组件

简单的弹窗

因为内容比较简单，不做过多的赘述，直接上代码
注：记得引入jquery

<style type="text/css">
	#popWindow {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0; 
		/* 增加背景色,提高视觉观感 */
		background-color: rgba(54,54,54,0.5);
		/* 因为是用作展示的，默认显示出来，用的时候需要把注释去掉 */
		/* display: none; */
	}
	.popWinBox {
		position: absolute;
		width: 300px;
		height: 200px;
		top: calc(50% - 100px);
		left: calc(50% - 150px);
		background-color: white;
		text-align: center;
		font-size: 16px;
	}
	.popWinTitle {
		width: 100%;
		height: 30px;
		color: white;
		line-height: 30px;
		background-color: #2A9073;
	}
	.popWinButtonArea {
		width: 100%;
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		padding: 15px;
	}
	.popWinButton {
		margin: 10px 20px;
	}
	#popTip {
		width: 80%;
		margin: auto;
		color: red;
	}
	</style>
<div id="popWindow">
	<div class="popWinBox" >
		<div class="popWinTitle">弹窗标题</div>
		<p>请录入您想录入的信息</p>
		<input type="text" id="" value="" />
		<p id="popTip"></p> <!-- 用以展示提示信息 -->
		<div class="popWinButtonArea">
			<input type="button" class="popWinButton" id="pftj_button" value="确定" />
			<input type="button" onclick="$('#popWindow').hide();" class="popWinButton" value="取消" />
		</div>
	</div>
</div>

<script type="text/javascript">
	$('#pftj_button').click(function(){
		$('#popTip').html('数据提交中，提交完成会刷新当前页面，请稍后!');
		// $('#popWindow').hide();
		setTimeout(function(){ //定时页面刷新
			window.location.reload();
		},3000)
	});
</script>

点击空白区域关闭弹窗的一种简单实现

这里的实现方式比较简单粗暴，在原有的弹窗页面展示区域，上方加一个masking的div，宽高都设为百分百，不添加背景，然后在点击这个masking的时候关闭显示弹窗
解释：这里利用了两个html或者说css的特性，

• 1、在不做特别设置的情况下写在下方的dom元素具有更高的层级；
• 2、点击事件如果加在最外层会具有最高优先级。

<style type="text/css">
	.masking {
		position: absolute;
		width: 100%;
		height: 100%;
	}
</style>

<div id="popWindow">
	<!-- 因为这个click事件比较简单
	就没有再单独在js内写个function出来
	直接这么写也是可以用的 -->
	<div class="masking" onclick="$('#popWindow').hide();"></div>
	<div class="popWinBox" >
		...
	</div>
</div>