html+js做一个简单的弹出层

首先：编辑一个简单的templete

<div id="popLayer">
</div>
<div id="popBox">
	<div class="close">
		<a href="javascript:void(0)" onclick="closeBox()">关闭</a>
	</div>
	<div class="content">我弹出来了</div>
</div>

下面时两个层的css

/*背景层*/
	#popLayer {
		display: none;
		background-color: #B3B3B3;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		-moz-opacity: 0.8;
		opacity:.80;
		filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
	}        
 /*弹出层，在背景层的上面座椅z-index只要比背景层的z-index大即可*/ 
	#popBox {
		display: none;
		background-color: #FFFFFF;
		z-index: 11;
		width: 200px;
		height: 200px;
		position:fixed;
		top:0;
		right:0;
		left:0;
		bottom:0;
		margin:auto;
	}
//关闭按钮的样式

#popBox .close{
		text-align: right;
		margin-right: 5px;
		background-color: #F8F8F8;
	}
	
/*关闭按钮*/
	#popBox .close a {
		text-decoration: none;
		color: #2D2C3B;
	}

只是一个简单的实例,样式也没有做过多的修饰，大家要是想要比较漂亮的可以代替alert的弹层，推荐一个链接：

//好看的代替alert的弹出层：
https://sweetalert.js.org/guides/