pzzrudlf · June 15, 2016 12:48
diff --git a/网易弹框演示_顾平老师 b/网易弹框演示_顾平老师
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>demo</title>
 	<style type="text/css">
 		*{margin:0;padding:0;}
 		.layer{
 			width:300px;
 			padding:20px;
 			background: #fff;
 			border:1px solid #bbb;
 			border-radius: 10px;
 			box-shadow: 0 3px 5px #bbb;
 			position:absolute;
 			top:50%;
 			left:50%;
 			transform: translate(-50%,-50%);
 		}
 		.layer h2{
 			font-size:16px;
 			border-bottom:1px solid #ddd;
 			padding-bottom:5px;
 			margin-bottom:20px;

 		}
 		.layer p{
 			font-size:14px;
 			text-indent: 2em;
 			line-height: 1.5;
 		}
 		.layer button{
 			display: block;
 			width:100px;
 			height: 30px;
 			line-height: 30px;
 			margin:30px auto;
 			background: #333;
 			color:#fff;
 			border:0;
 			border-radius: 5px;
 			cursor: pointer;
 		}
 	</style>
 </head>
 <body>

 <!-- 	<div class="layer" style="display:none;">
 	<h2>提示</h2>
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tempore porro atque minus excepturi ut molestiae error, totam, saepe debitis eos! Soluta debitis beatae porro tempora consequatur tempore cumque, nobis!</p>
 	<button>知道了</button>
 </div>
 <button id="button">点击这个按钮出现弹框</button>
 <script>
 	document.getElementById("button").addEventListener(
 		"click",function(){
 			document.querySelector(".layer").style.display="block";
 	});
 	document.querySelector(".layer button").addEventListener(
 		"click",function(){
 			document.querySelector(".layer").style.display="none";
 	});
 </script> -->


 	<button id="showSomething">click me!</button>
 	<script>
 		(function(){
 			var html = '<div class="layer">\
 							<h2>tip</h2>\
 							<p>{text}</p>\
 							<button>know</button>\
 						</div>';
 			function Layer(text){
 				this.text = text;
 				this.init();
 			}

 			Layer.prototype.init = function(){
 				this.initDom();
 				this.initEvent();
 			}

 			Layer.prototype.initDom = function(){
 				var node = document.createElement("div");
 				node.innerHTML = html.replace("{text}",this.text);
 				this.dom = node.childNodes[0];
 			}

 			Layer.prototype.initEvent = function(){
 				this.dom.addEventListener("click",function(event){
 					if (event.target.tagName == "BUTTON"){
 						this.hide();
 					}
 				}.bind(this));
 			}

 			Layer.prototype.show=function(){
 				document.body.appendChild(this.dom);
 			}

 			Layer.prototype.hide = function(){
 				document.body.removeChild(this.dom);
 			}

 			window.Layer = Layer;
 		})();

 		var layer = new Layer('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit accusamus recusandae laudantium mollitia vitae cupiditate soluta provident doloribus, minima maiores, praesentium optio eos nihil consequatur temporibus repudiandae, itaque nesciunt obcaecati.');

 		document.getElementById("showSomething").addEventListener("click",function(){
 			layer.show();
 		})
 		// layer.show();
 		console.log(window.Layer);
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	.layer{
	width:300px;
	padding:20px;
	background: #fff;
	border:1px solid #bbb;
	border-radius: 10px;
	box-shadow: 0 3px 5px #bbb;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	}
	.layer h2{
	font-size:16px;
	border-bottom:1px solid #ddd;
	padding-bottom:5px;
	margin-bottom:20px;

	}
	.layer p{
	font-size:14px;
	text-indent: 2em;
	line-height: 1.5;
	}
	.layer button{
	display: block;
	width:100px;
	height: 30px;
	line-height: 30px;
	margin:30px auto;
	background: #333;
	color:#fff;
	border:0;
	border-radius: 5px;
	cursor: pointer;
	}
	</style>
	</head>
	<body>

	<!-- <div class="layer" style="display:none;">
	<h2>提示</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tempore porro atque minus excepturi ut molestiae error, totam, saepe debitis eos! Soluta debitis beatae porro tempora consequatur tempore cumque, nobis!</p>
	<button>知道了</button>
	</div>
	<button id="button">点击这个按钮出现弹框</button>
	<script>
	document.getElementById("button").addEventListener(
	"click",function(){
	document.querySelector(".layer").style.display="block";
	});
	document.querySelector(".layer button").addEventListener(
	"click",function(){
	document.querySelector(".layer").style.display="none";
	});
	</script> -->


	<button id="showSomething">click me!</button>
	<script>
	(function(){
	var html = '<div class="layer">\
	<h2>tip</h2>\
	<p>{text}</p>\
	<button>know</button>\
	</div>';
	function Layer(text){
	this.text = text;
	this.init();
	}

	Layer.prototype.init = function(){
	this.initDom();
	this.initEvent();
	}

	Layer.prototype.initDom = function(){
	var node = document.createElement("div");
	node.innerHTML = html.replace("{text}",this.text);
	this.dom = node.childNodes[0];
	}

	Layer.prototype.initEvent = function(){
	this.dom.addEventListener("click",function(event){
	if (event.target.tagName == "BUTTON"){
	this.hide();
	}
	}.bind(this));
	}

	Layer.prototype.show=function(){
	document.body.appendChild(this.dom);
	}

	Layer.prototype.hide = function(){
	document.body.removeChild(this.dom);
	}

	window.Layer = Layer;
	})();

	var layer = new Layer('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit accusamus recusandae laudantium mollitia vitae cupiditate soluta provident doloribus, minima maiores, praesentium optio eos nihil consequatur temporibus repudiandae, itaque nesciunt obcaecati.');

	document.getElementById("showSomething").addEventListener("click",function(){
	layer.show();
	})
	// layer.show();
	console.log(window.Layer);
	</script>
	</body>
	</html>