js 构造函数封装弹出窗插件小例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="clickme">点击</button>
		<button id="clickme1">点击1111111</button>
	</body>
	<script type="text/javascript">
		//弹窗样式
		var backgroundDivStyle = "position: fixed;top:0;left:0;z-index:9999;width: 100%;height: 100%;background: #000;opacity: 0.7;";
		var boxDivStyle = "position: fixed;z-index: 10000;left:50%;top:50%;border:5px solid #ccc;background: #fff;transform: translate(-50%,-50%);padding:20px 30px;line-height: 30px;";
		var boxSpanDivStyle = "position: absolute;top:0;right:0;padding:0 5px;cursor:pointer;background:#ccc;color:#fff;font-size: 20px;";
		//构造函数
		var alerts = {
			run:function(word){
				this.created(word);
				this.bind();
			},
			remove:function(){
				document.body.removeChild(document.getElementById("boxDiv"));
				document.body.removeChild(document.getElementById("backgroundDiv"));
			},
			created:function(word){
				addDiv(backgroundDivStyle,"backgroundDiv");
				addDiv(boxDivStyle,"boxDiv",word);
				document.getElementById("boxDiv").appendChild(addSpan(boxSpanDivStyle,"boxSpan"));
			},
			bind:function(){
				var _this = this;
				document.getElementById("boxSpan").addEventListener("click",function(){
					_this.remove();
				});
				document.getElementById("backgroundDiv").addEventListener("click",function(){
					_this.remove();
				});
			}
		}
		//创建弹窗元素
		function addDiv(stl,id,word){
			var oDiv = document.createElement('div');
			oDiv.style = stl;
			oDiv.id = id;
			if(word) oDiv.innerHTML = word;
			document.body.appendChild(oDiv);
		}
		function addSpan(stl,id){
			var oSpan = document.createElement('span');
			oSpan.style = stl;
			oSpan.id = id;
			oSpan.innerHTML = "×";
			return oSpan;
		}
		//点击触发
		document.getElementById("clickme").onclick = function(){
			alerts.run("说点什么吧！说点什么吧！说点什么吧！说点什么吧！说点什么吧！说点什么吧！说点什么吧！说点什么吧！说点什么吧！说点什么吧！");
		}
		document.getElementById("clickme1").onclick = function(){
			alerts.run("再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！再说些什么吧！");
		}
	</script>
</html>
js 构造函数封装弹出窗插件小例子

猜你喜欢
