项目不能引用过多js文件,所以不能用jquery实现。后面去查看了下jquery的动画那段方法,觉得jquery整个对象体写的实在紧密度太大、功能太强,跟一半后就懒得再继续跟进去了看实现方法了。于是就网上找了几个类似案例,但均不理想。所以大家如果有比较好的,可以贴出来分享下
注意:要兼容Firefox和IE浏览器;尽量实现的不要是那种出现滚动条或拖拉滚动条,对话框还跑在上面,下不来的

另外有没有好一点的整套javascript完整居中的对话框:含确认对话框、确定对话框的。也分享下

解决方案 »

  1.   

    js MessageBox 类 无插件,支持弹出层(原页面div 或者 div代码),消息框(alert confirm)
      

  2.   

    项目不复杂的话,还是不要使用JQuery。
    自己写一个也不难啊
      

  3.   

    老哥,这个只支持IE的害我整理了半天,结果又删除。
     var MessageHelper = {
            id: "MESSAGEID", //消息ID,可重写
            title: "消息提示", //消息标题,可重写
            caption: "消息提示", //消息正文标题,可重写
            message: "", //消息内容
            target: "",
            action: "",
            width: 200, //消息框长度,可重写
            height: 120, //消息框高度,可重写
            timeout: 150,
            speed: 20,
            step: 1,
            right: this.left + this.width,//右边长度,可重写
            bottom: screen.height,//底部长度,可重写
            left: this.right - this.width,//左边长度,可重写
            top: this.bottom - this.height,//顶部长度,可重写
            timer: 0, //控制弹出的时间频率
            pause: false,
            close: false,
            autoHide: true,
            Pop: null, //面板私有变量        show: function (settingcfn) {
                if (settingcfn) {
                    this.id = settingcfn.id || this.id;
                    this.title = settingcfn.title || this.tit;
                    this.caption = settingcfn.caption || this.caption;
                    this.message = settingcfn.message || this.message;
                    this.target = settingcfn.target || this.target;
                    this.action = settingcfn.action || this.action;
                    this.width = settingcfn.width || this.width;
                    this.height = settingcfn.height || this.height;
                    this.timeout = settingcfn.timeout || this.timeout;
                    this.speed = settingcfn.speed || this.speed;
                    this.step = settingcfn.step || this.step;
                    this.right = settingcfn.right || this.right;
                    this.bottom = settingcfn.bottom != null ? (settingcfn.bottom > screen.height ? screen.height : settingcfn.bottom) : this.bottom;
                    this.left = settingcfn.left || this.left;
                    this.top = settingcfn.top || this.top;
                    this.timer = settingcfn.timmer || this.timer;
                    this.pause = settingcfn.pause || this.pause;
                    this.close = settingcfn.close || this.close;
                    this.autoHide = settingcfn.autoHide || this.autoHide;             }            var oPopup = window.createPopup(); //IE5.5+             this.Pop = oPopup;            var w = this.width;
                var h = this.height;            var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>"
                str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"
                str += "<TR>"
                str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"
                str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"
                str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"
                str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"
                str += "</TR>"
                str += "<TR>"
                str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h - 28) + ">"
                str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + "<BR><BR>"
                str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=false id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A> - <A href='http://www.makewing.com' hidefocus=false id='ommand'><FONT color=#ff0000>网页素材下载站</FONT></A></DIV>"
                str += "</DIV>"
                str += "</TD>"
                str += "</TR>"
                str += "</TABLE>"
                str += "</DIV>"            oPopup.document.body.innerHTML = str;            this.offset = 0;
                var me = this;            oPopup.document.body.onmouseover = function () { me.pause = true; }
                oPopup.document.body.onmouseout = function () { me.pause = false; }            this.timer = window.setInterval(function () {
                    var x = me.left;
                    var y = 0;
                    var width = me.width;
                    var height = me.height;                if (me.offset > me.height) {
                        height = me.height;
                    } else {
                        height = me.offset;
                    }                y = me.bottom - me.offset;
                    if (y <= me.top) {
                        me.timeout--;
                        if (me.timeout == 0) {
                            window.clearInterval(me.timer);
                            if (me.autoHide) {
                                me.hide();
                            }
                        }
                    } else {
                        me.offset = me.offset + me.step;
                    }
                    me.Pop.show(x, y, width, height);            }, this.speed);            var btClose = oPopup.document.getElementById("btSysClose");            btClose.onclick = function () {
                    me.close = true;
                    me.hide();
                }            var btCommand = oPopup.document.getElementById("btCommand");
                btCommand.onclick = function () {
                    me.oncommand();
                }
                var ommand = oPopup.document.getElementById("ommand");
                ommand.onclick = function () {
                    //this.close = true;
                    me.hide();
                    window.open(ommand.href);
                }        },
            onunload: function () {
                return true;
            },
            oncommand: function () {
                this.hide();
            },        speed: function () {
                var t = 20;
                try {
                    t = praseInt(s);
                } catch (e) { }
                this.speed = t;
            },        step: function () {
                var t = 1;
                try {
                    t = praseInt(s);
                } catch (e) { }
                this.step = t;
            },               hide: function () {
                if (this.onunload()) {
                    var offset = this.height > this.bottom - this.top ? this.height : this.bottom - this.top;                if (this.timer > 0) {
                        window.clearInterval(me.timer);
                    }
                }
                this.timer = window.setInterval(function () {
                    if (this.pause == false || this.close) {
                        var x = this.left;
                        var y = 0;
                        var width = this.width;
                        var height = 0;
                        if (this.offset > 0) {
                            height = this.offset;
                        }
                        y = this.bottom - height;                    if (y >= this.bottom) {
                            window.clearInterval(this.timer);
                            this.Pop.hide();
                        } else {
                            this.offset = this.offset - this.step;
                        }
                        this.Pop.show(x, y, width, height);
                    }
                }, this.speed);
            }       
        };