前端html+css+js弹窗的实现

近期由于项目需要，学习了一下js弹窗的实现，感觉挺简单的。

html代码部分：

	
	
	
	


	弹窗
	
	

		

			

				×
				
弹窗头部
			
			

				
弹窗标题
				
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, ullam, nisi, enim laboriosam ea cum necessitatibus ipsum cupiditate neque soluta qui autem odit eligendi blanditiis voluptatem repellat suscipit quia perspiciatis.
			
			
底部内容
		
	
	
	

css代码部分：

body{
	font-family: Arial,Helvetica,sans-serif;
	font-size: 17px;
	text-align: 1.5;
}

#open_btn {
	background: #009900;
}

#background {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}

#div1 {
	background:#eeeeee;
	width: 70%;
	z-index: 1;
	margin: 12% auto;
	overflow: auto;
}

span {
	color: white;
	padding-top: 12px;
	cursor: pointer;
	padding-right: 15px;
}

#div2 {
	background:#eeeeee;
	margin: auto;
	height: 300px;
	padding: 0 20px;
}

#close {
	padding: 5px;
	background: #5cd31b;
}

#close-button {
	float: right;
	font-size: 30px;
}

#foot {
	padding: 5px 0;
	text-align: center;
	background: #5cd31b;
	color: white;
}

h2 {
	margin: 10px 0;
	color: white;
	padding-left: 15px;
}

h3 {
	margin: 0 0px;
	padding-top: 15px;
}

js代码部分：

var btn = document.getElementById('open_btn');
var div = document.getElementById('background');
var close = document.getElementById('close-button');

btn.onclick = function show() {
	div.style.display = "block";
}

close.onclick = function close() {
	div.style.display = "none";
}

window.onclick = function close(e) {
	if (e.target == div) {
		div.style.display = "none";
	}
}

实现效果如下：