欢迎访问 水平网    今天是:2018年01月16日 注册 | 登录 | 订阅 | 收藏
>> JavaScript >> JS制作的弹出层效果
推荐代码
热点代码

JS制作的弹出层效果

作者:未知,  来源:网络,  阅读:667,  发布时间:2014-04-19  【放入收藏夹
调用实例:
window.onload = function(){
example1 = new EasyWindow("测试窗口2" ,"这里是自定义:<br /><input type='text' />输入文字" ,"common")
example2 = new EasyWindow("测试窗口1" ,"http://www.baidu.com" ,"url" ,{
left:"300px" ,top:"100px" ,width:"750px" ,height:"600px" ,background:"images/gray.gif"
});
example3 = new EasyWindow("测试窗口3" ,"http://www.google.cn" ,"url" ,{
left:"400px" ,top:"200px" ,width:"750px" ,height:"600px" ,background:"images/green.gif"
});
}

也可以直接调用onclick="new EasyWindow(...);"

其中要用到的图片文件:upload/code/20091006114952.rar
代码:javascript复制
var root = ROOT; //根目录地址,绝对路径
var EasyWindow = function(title
/*标题*/
, content
/*显示内容*/
, type
/*类型*/
, style
/*窗口样式*/
) {
    this.title = title; //标题
    this.name = parseInt(Math.random() * 100000); //窗口名称
    this.style = style; //窗口样式
    this.content = content; //显示内容
    this.type = typeof type == "undefined" ? "common": type; //类型
    this.height = ""; //窗口高度
    this.width = "" //窗口宽度
    this.init = function() { //初始化窗口
        //存储窗口字符串
        var strInit = new EasyWindow.StringBuild();
        strInit.push("<div style=\"width:350px;height:400px;position:absolute;border:1px solid #cccccc;");
        strInit.push("font-family: 宋,sans-serif;font-size:12px;top:0px;left:0px;");
        strInit.push("border-bottom:2px solid #E0E0E0;border-right:2px solid #E0E0E0;\" id=\"" + this.name + "\">");
        strInit.push("<table style=\"width:100%;height:25px;cursor:move;background:url(" + root + "images/window/green.gif);\" ");
        strInit.push("cellpadding=\"0\" cellspacing=\"0\">");
        strInit.push("<tr>");
        strInit.push("<td style=\"font-weight:bold;border-bottom:1px solid #cccccc;padding-left:3px;\">" + this.title + "</td>");
        strInit.push("<td style=\"width:38px;border-bottom:1px solid #cccccc;\">");
        strInit.push("<a href=\"#\"><img src=\"" + root + "images/window/hide.gif\" style=\"border:0;\" alt=\"隐藏\" /></a> ");
        strInit.push("<a href=\"#\"><img src=\"" + root + "images/window/close.gif\" style=\"border:0;\" alt=\"关闭\" /></a>");
        strInit.push("</td></tr></table>");
        strInit.push("<div style=\"height:90%;padding:3px;overflow:auto;background:#ffffff;\"></div></div>");

        //加载窗口
        var divInit = document.createElement("div");

        divInit.innerHTML = strInit.toString();

        document.body.appendChild(divInit);

        //设置部件命令
        this.setCss(); //设置窗口属性
        this.startDrag(); //设置拖动
        this.setContent(); //设置内容
        this.setTop(); //设置窗口优先级
        this.setCommond(); //设置关闭
        EasyWindow.ArrayW.push(document.getElementById(this.name)); //存储窗口到数组
    };
    this.init();

};

//存储窗口到数组
EasyWindow.ArrayW = new Array();

//字符串连接类
EasyWindow.StringBuild = function() {
    this.arr = new Array();
    this.push = function(str) {
        this.arr.push(str);
    };

    this.toString = function() {
        return this.arr.join("");
    };
};

//拖动类
EasyWindow.Drag = function(o, oRoot) {
    var _self = this;
    //拖动对象
    this.obj = (typeof oRoot != "undefined") ? oRoot: o;
    this.relLeft = 0; //记录横坐标
    this.relTop = 0; //记录纵坐标
    o.onselectstart = function() {
        return false;
    };

    o.onmousedown = function(e) { //鼠标按下
        e = _self.fixE(e);
        _self.relLeft = e.clientX - _self.fixU(_self.obj.style.left);
        _self.relTop = e.clientY - _self.fixU(_self.obj.style.top);
        document.onmousemove = function(e) {
            _self.drag(e);
            _self.obj.style.border = "1px dashed #000000";
            _self.obj.style.filter = "alpha(opacity=30)";
            _self.obj.style.opacity = "0.3";
        };

        document.onmouseup = function() {
            _self.end();
            _self.obj.style.border = "1px solid #cccccc";
            _self.obj.style.borderBottom = "2px solid #E0E0E0";
            _self.obj.style.borderRight = "2px solid #E0E0E0";
            _self.obj.style.filter = "alpha(opacity=100)";
            _self.obj.style.opacity = "1";
        };

    };

    this.drag = function(e) { //拖动
        e = this.fixE(e);
        var l = e.clientX - this.relLeft;
        var t = e.clientY - this.relTop;
        if (t < 0)
        {
            t = 0; //防止头部消失
        }

        this.obj.style.left = l + "px";
        this.obj.style.top = t + "px";
    };

    this.end = function() { //结束拖动
        document.onmousemove = null;
        document.onmouseup = null;
    };

    this.fixE = function(e) { //修复事件
        if (typeof e == "undefined") e = window.event;
        return e;
    };

    this.fixU = function(u) { //处理px单位
        return parseInt(u.split("p")[0]);
    };
};

//设置窗口属性
EasyWindow.prototype.setCss = function() {
    //设定样式
    var obj = document.getElementById(this.name);
    if (typeof this.style != "undefined")
    {
        if (typeof this.style.width != "undefined") obj.style.width = this.style.width; //设置宽度
        if (typeof this.style.height != "undefined") obj.style.height = this.style.height; //设置高度
        if (typeof this.style.top != "undefined") obj.style.top = this.style.top; //设置top
        if (typeof this.style.left != "undefined") obj.style.left = this.style.left; //设置left
        if (typeof this.style.background != "undefined") //设置背景
        {
            obj.getElementsByTagName("table")[0].style.background = "url(" + this.style.background + ")";
        }
    }

    //存储宽高度
    this.height = obj.style.height;
    this.width = obj.style.width;
}

//窗口拖动
EasyWindow.prototype.startDrag = function() {
    var obj = document.getElementById(this.name);
    new EasyWindow.Drag(obj.childNodes[0], obj);
};

//设置内容
EasyWindow.prototype.setContent = function() {
    var obj = document.getElementById(this.name).childNodes[1];
    if (this.type == "common")
    {
        obj.innerHTML = this.content;
    }
    else
    {
        var iframe = document.createElement("iframe");
        iframe.width = "100%";
        iframe.height = "100%";
        iframe.frameBorder = 0;
        iframe.src = this.content;
        obj.appendChild(iframe);
    }
};

//设定窗口优先级
EasyWindow.prototype.setTop = function() {
    document.getElementById(this.name).onclick =
    document.getElementById(this.name).onmousedown =
    function() {
        for (var i = 0; i < EasyWindow.ArrayW.length; i++)
        {
            EasyWindow.ArrayW[i].style.zIndex = 1;
        }
        this.style.zIndex = 100;
    };
};

//设置关闭
EasyWindow.prototype.setCommond = function() {
    var _self = this;
    //根对象
    var obj = document.getElementById(this.name);
    //设置隐藏
    obj.childNodes[0].getElementsByTagName("a")[0].onclick = function() {
        if (obj.childNodes[1].style.display == "")
        {
            obj.style.height = "25px";
            obj.style.width = "350px";
            obj.childNodes[1].style.display = "none";
            this.getElementsByTagName("img")[0].src = root + "images/window/show.gif";
        }
        else
        {
            obj.style.height = _self.height;
            obj.style.width = _self.width;
            obj.childNodes[1].style.display = "";
            this.getElementsByTagName("img")[0].src = root + "images/window/hide.gif";
        }
    };

    //设置关闭
    obj.childNodes[0].getElementsByTagName("a")[1].onclick = function() {
        obj.style.display = "none";
        obj.removeNode(true);
    };
};

//获取值
EasyWindow.prototype.getValue = function() {
    return this.content;
};

//设置值
EasyWindow.prototype.setValue = function(Value) {
    this.content = Vlaue;
    this.setContent();
};
Tags:弹出层
评论【共有0条评论】查看所有评论
昵称:(*)   邮箱:   QQ:   验证码: 看不清楚?点击刷新验证码