码迷,mamicode.com
首页 > 其他好文 > 详细

做一个简单的遮罩层

时间:2017-03-14 13:32:34      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:position   click   做了   gre   dom   面向   ini   封装   set   

 

首先,我们写一个遮罩层,没错就是那种

页面有一个按钮,点击按钮遮罩层出现,遮罩层上面的按钮也出现 ,

点击遮罩层上面的按钮,遮罩层隐藏,遮罩层上的按钮也隐藏

先来看看页面html代码

<style>
	* {margin: 0;padding: 0;}		
	html,body {width: 100%;}
	.mask {position: fixed;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);	}			
	.btn2 { position: fixed;left: 100px;top: 100px;z-index: 2;border: 1px solid blue;padding: 20px;background-color: palegreen;}			
	.btn1 {border: 1px solid blue;padding: 20px;background-color: orange;}
</style>
<div class="btn1" id="btn1">点击我打开遮罩层</div>

 然后是js部分,这是一开始我们写js的普通写法

var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
	var mask = document.createElement("div");
	mask.id = "mask";
	mask.className = "mask";
	document.body.appendChild(mask);
			
	var btn2 = document.createElement("div");
	btn2.id = "btn2";
	btn2.className = "btn2"
	btn2.innerHTML = "点击我关闭遮罩层";
	btn2.onclick = function(){
		this.parentNode.removeChild(mask);
		this.parentNode.removeChild(this);
	}
	document.body.appendChild(btn2);
}

 这种写法其实是面向过程的写法,优点是写法灵活,对于初学者来说比较易读。但是缺点也很明显,假如我们要增加新的东西,容易对前面的代码造成影响,有些可复用的东西其实可以封装个方法来调用,这样可以减少代码的冗余,那么我们在优化一下就变成了下面那样

var doc = document;
var body = doc.body;
var btn1 = getId("btn1");

btn1.onclick = function() {
	var mask = createEle(‘div‘);
	setAttr(mask, {
		"id": "mask",
		"class": "mask"
	});
	body.appendChild(mask);

	var btn2 = createEle(‘div‘);
	setAttr(btn2, {
		"id": "btn2",
		"class": "btn2",
	});
	btn2.innerHTML = ‘点击我关闭遮罩层‘;
	btn2.onclick = function() {
		removeSiblingEle(this, mask);
		removeSiblingEle(this, this);
	}
	body.appendChild(btn2)
}

function getId(n) {
	return doc.getElementById(n);
}

function removeSiblingEle(m, n) {
	m.parentNode.removeChild(n)
}

function createEle(n) {
	return doc.createElement(n);
}
//遍历属性穿插进去
function setAttr(self, attr) {
	for(var i in attr) {
		self.setAttribute(i, attr[i])
	}
}

 可以看到我们做了些代码的优化,但是,我们还有个问题,就是全局变量的污染,而且以一个组件的角度而言,感觉方法之间没什么联系,那么我们使用面向对象的方法再将他进行优化一下,

//创建一个构造函数
function MaskFn(){
	this.doc = document;
	this.body = this.doc.body;
	this.getId = function(n){
		return this.doc.getElementById(n)
	}
}
//用prototype进行扩展
MaskFn.prototype = {		
	init:function(){
		var _self = this;
		var btn1 = _self.getId("btn1");
		btn1.onclick = function(){
			_self.clickFn();						
		}
	},
	createDom:function(n){
		var _self = this;
		return _self.doc.createElement(n);
	},			
	setAttr:function(param,attrs){
		var _self = this;
		var i;
		for(i in attrs){
			param.setAttribute(i,attrs[i]);
		}
	},
	removeDom:function(param1,param2){
		var _self = this;
		param1.parentNode.removeChild(param2);
	},
	clickFn:function(){
		var _self = this;
		var mask = _self.createDom("div");
		_self.setAttr(mask, {
			"id": "mask",
			"class": "mask",
		});
		_self.body.appendChild(mask);	
		var btn2 = _self.createDom("div");
		_self.setAttr(btn2,{
			"id":"btn2",
			"class":"btn2"
		})
		btn2.innerHTML = "点击我关闭遮罩层";
					
		btn2.onclick = function(){
			_self.removeDom(this,mask);
			_self.removeDom(this,this);
		}
		_self.body.appendChild(btn2)
	}
}
//实例构造函数
new MaskFn().init();

 好了,大概就优化到这里了,要看到实例的效果,你可以狠狠的点击这里,查看例子

 

做一个简单的遮罩层

标签:position   click   做了   gre   dom   面向   ini   封装   set   

原文地址:http://www.cnblogs.com/qqing/p/6547796.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!