页面自定义弹出输入框

网上查找的资料代码,自己调试整理成可以用在个个地方的弹出输入框,可以在一个页面中有多个不同的弹出框

封装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
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值