网上查找的资料代码,自己调试整理成可以用在个个地方的弹出输入框,可以在一个页面中有多个不同的弹出框
封装js PopDrag.js
if(!Function.prototype.bind) {
Function.prototype.bind = function(o,args) {
var _self = this;
return function() {
return _self.apply(o,[].concat(args));
};
};
}
var EventUtil = {
_$:function(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
},
addEvent:function(el,type,handler) {
return el.addEventListener ? el.addEventListener(type,handler,false) : el.attachEvent('on'+type,handler);
},
removeEvent:function(el,type,handler) {
return el.removeEventListener ? el.removeEventListener(type,handler,false) : el.detachEvent('on'+type,handler);
},
getViewPort:function(w) {//获取视窗宽度和高度
//使用指定的窗口,如果缺省则为当前窗口
w = w || window;
/*
*当没有滚动条时,document.documentElement.clientWidth和window.innerWidth的值是一样的
*出现滚动条时,前者的值比后者的小,差即为滚动条所占的宽度,做遮罩层或弹出层时,前者更为精确
*/
//IE8及以下版本的IE系列未实现该方法
// if(w.innerWidth != null) {
// return {
// w:w.innerWidth,
// h:w.innerHeight
// };
// }
var d = w.document;
//IE标准模式,即声明了xhtml1.0头
if(document.compatMode == 'CSS1Compat') {
return {
w:d.documentElement.clientWidth,
h:d.documentElement.clientHeight,
sw:d.documentElement.scrollWidth,
sh:d.documentElement.scrollHeight
};
}
//怪异模式(Quirks),未声明DOCTYPE
return {
w:d.body.clientWidth,
h:d.body.clientHeight,
sw:d.body.scrollWidth,
sh:d.body.scrollHeight
};
},
getScrollOffset:function(w) {//获取滚动位置
//使用指定的窗口,如果缺省则为当前窗口
w = w || window;
//IE8及以下版本的IE系列未实现该方法
if(w.pageXOffset != null) {
return {
x:w.pageXOffset,
y:w.pageYOffset
};
}
var d = w.document;
//IE标准模式,即声明了xhtml1.0头
if(document.compatMode == 'CSS1Compat') {
return {
x:d.documentElement.scrollLeft,
y:d.documentElement.scrollTop
};
}
//怪异模式(Quirks),未声明DOCTYPE
return {
x:d.body.scrollLeft,
y:d.body.scrollTop
}
},
getStyle:function(el,cName) {
return el.currentStyle ? el.currentStyle[cName] : document.defaultView.getComputedStyle(el,null)[cName];
},
getBroswersVer: {
isIE: /msie/i.test(navigator.userAgent) && !window.opera,
isIE6: /msie 6/i.test(navigator.userAgent) && !window.opera,
isChrome: /chrome/i.test(navigator.userAgent),
isOpera:!!window.opera
},
getEvent:function(e) {
return e || window.event;
},
preventDefault:function(e) {
e = e || window.event;
return e.preventDefault ? e.preventDefault() : e.returnValue = false;
},
setOpacity:function(el,level) {
return el.filters ? (el.style.filter = 'alpha(opacity ='+level+')') : (el.style.opacity = level/100);
},
fadeIn:function(params) {
params = params || {};
var el = params.el || null,
speed = params.speed || 20, //淡入动画进行的速度
level = params.level || 100, //如果没有指定,则淡入透明度至100
initOpacity = params.initOpacity || 0, //开始动画时元素的透明度,如果没有则设为0
elStyle = el.style,
step = initOpacity; //透明度每次改变的增量
elStyle.display = 'block';
(function() {
EventUtil.setOpacity(el,step);
step += 5;
(step <= level) && setTimeout(arguments.callee,speed);
})();
},
fadeOut:function(params) {
params = params || {};
var el = params.el || null,
speed = params.speed || 20, //淡出动画进行的速度
level = params.level