類比alert,confirm,prompt

以前項目上用的那個雖然也是自己寫的，但是是基於JQ的，前不久看到人人網出的JS有道考題和這個很像，所以就用原生JS重寫了一遍：

JS

(function(win){    var tips = {        'title':'信物寶提示',        'enter':'確定',        'cancel':'取消',        'close':'關閉'    },    isIE6 = !window.XMLHttpRequest,    cssLoaded = false,    isOpen = false,    loadCss = function(){        if(cssLoaded) return;        var cssHref = 'dialog.css';        var style = document.createElement('link');        style.type = 'text/css';        style.rel = 'stylesheet';        style.href = cssHref;        document.getElementsByTagName('head')[0].appendChild(style);        cssLoaded = true;    };    /*************************************對外提供的介面****************************************************/    var dialog = function(opts){        return new dialog.prototype.init(opts);    };    dialog.prototype = {        constructor:dialog,        init:function(opts){            loadCss();        },        alert:function(opts){            var _this = this;            var set = extend({                width:400,                height:100            },opts||{});            if(isOpen) this.close();            isOpen = true;            this.doms = createElements(set);            this.doms.contentBox.appendChild(document.createTextNode(opts.content));            setCenter(this.doms);            this.doms.btnEnter.onclick = function(){                _this.close();                opts.callback && opts.callback(true);            };            this.doms.contentTitle.onmousedown = function(e){                var mousePos= getMousePos(e),pos = getElementPos(_this.doms.contentOuter);                var _move = move(mousePos,_this.doms.contentOuter,pos.y,pos.x);                addEvent(document,'mousemove',_move);                addEvent(document,'mouseup',function(){                    removeEvent(document,'mousemove',_move)                });            };            this.doms.contentTitle.ondragstart = function(){ return false;};            this.doms.close.onclick = function(){                _this.close();            };            addEvent(window,'resize',function(){setCenter(_this.doms);})        },        confirm:function(opts){            var _this = this;            this.alert(opts);            this.doms.btnBox.appendChild(this.doms.btnCancel);            this.doms.btnCancel.onclick = function(){                _this.close();                opts.callback && opts.callback(false);            }        },        prompt:function(opts){            var _this = this,input;            this.alert(opts);            input = createEl('<input type="text" name="" value="'+opts.defaultValue+'" id="diaglo_prompt_input"/>',this.doms.contentBox);            input.select();            this.doms.btnBox.appendChild(this.doms.btnCancel);            this.doms.btnEnter.onclick = function(){                 _this.close();                 opts.callback && opts.callback(input.value);            };            this.doms.btnCancel.onclick = function(){                _this.close();                opts.callback && opts.callback(null);            };            this.doms.close.onclick = function(){                _this.close();            };        },        load:function(opts){            var _this = this;            this.alert(opts);            this.doms.contentOuter.removeChild(this.doms.btnBox);            this.doms.btnEnter.onclick = null;            ajax({                url:opts.content,                success:function(data){                    _this.doms.contentBox.innerHTML = data;                    opts.callback && opts.callback(data);                }            })        },        loadIframe:function(opts){            var _this = this,iframe = document.createElement('iframe');            this.alert(opts);            this.doms.contentOuter.removeChild(this.doms.btnBox);            this.doms.btnEnter.onclick = null;            iframe.src = opts.content;            iframe.style.width = '100%';            iframe.style.height = '100%';            iframe.frameborder = '0'            _this.doms.contentBox.innerHTML = '';            _this.doms.contentBox.appendChild(iframe);            iframe.attachEvent ? (iframe.attachEvent = _load) : (iframe.onload = _load);            function _load(){                opts.callback && opts.callback(iframe);            };        },        close:function(){            var db = document.body;            db.removeChild(this.doms.overlayer);            db.removeChild(this.doms.contentOuter);            isIE6 && db.removeChild(this.doms.overlayIframe);            this.doms.btnEnter.onclick = this.doms.btnCancel.onclick = this.doms.close.onclick = this.doms.contentTitle.onmousedown = null;            this.doms = null;            isOpen = false;        }    };    dialog.prototype.init.prototype = dialog.prototype;    win.regMethod = function(scope,handler){        return scope[handler]= dialog();    };    /**********************************私人方法*******************************************************/    function extend(subClass,superClass){        for(var key in superClass) subClass[key] = superClass[key];        return subClass;    };    function createElements(opts){        var db = document.body,h = Math.max(document.documentElement.clientHeight,document.body.offsetHeight);        var width = opts.width,height = opts.height;        var overlayer = createEl('<div id="dialog_overlayer" style="position:absolute;top:0;left:0;width:100%;height:'+h+'px;background:#000;opacity:.5;filter: Alpha(Opacity=50);"></div>',db),            overlayIframe = isIE6 && createEl('<iframe marginwidth="0" marginheight="0" align="top" scrolling="no" frameborder="0" class="dialog_HideSelect" src="" style="position:absolute;top:0;left:0;width:100%;height:'+h+'px;filter: Alpha(Opacity=0);"></iframe>',db),            contentOuter = createEl('<div id="dialog_window" style="position:fixed;_position:absolute;top:50%;left:50%;width:'+width+'px;"></div>',db),            contentTitle = createEl('<div id="dialog_title"><h3>'+ (opts.title || tips.title) +'</h3></div>',contentOuter),            close = createEl('<a href="#" id="dialog_btn_close" >'+ tips.close +'</a>',contentTitle),            contentBox = createEl('<div id="dialog_Content" style="height:'+height+'px;"></div>',contentOuter),            btnBox = createEl('<div id="dialog_btnBox"></div>',contentOuter),            btnEnter = createEl('<button type="button" id="dialog_btn_enter">'+ (opts.enter||tips.enter) +'</button>',btnBox),            btnCancel = createEl('<button type="button" id="dialog_btn_cancel">'+(opts.cancel|| tips.cancel) +'</button>')        return {            overlayer:overlayer,            overlayIframe:overlayIframe,            contentOuter:contentOuter,            contentTitle:contentTitle,            close:close,            contentBox:contentBox,            btnBox:btnBox,            btnEnter:btnEnter,            btnCancel:btnCancel        };    };    function createEl(str,parent){        var div = document.createElement('div'),el;        div.innerHTML = str;        el = div.firstChild;        return parent ? parent.appendChild(el) : el;    };    function setCenter(doms){        var T = doms.contentOuter,w = T.offsetWidth,h = T.offsetHeight,timer = null;        var dd = document.documentElement,W = dd.clientWidth,H = dd.clientHeight;         T.style.top = (H-h)/2+'px';        T.style.left = (W-w)/2+'px';        if(isIE6){            window.onscroll = function(){                if(timer) clearTimeout(timer);                timer = setTimeout(function(){                    var t = Math.max(document.body.scrollTop,document.documentElement.scrollTop);                    T.style.top = (t+H-h)/2+'px';                },100);            }        }    };    function getMousePos(e){        e = e || window.event;        if(e.pageX || e.pageY) return { left:e.pageX,top:e.pageY};        return {            left:e.clientX + document.documentElement.scrollLeft - document.body.clientLeft,            top:e.clientY + document.documentElement.scrollTop - document.body.clientTop        };    };    function addEvent(el,type,fn){        if(el.addEventListener != undefined){            el.addEventListener(type,fn,false);        }else if(el.attachEvent != undefined){            el.attachEvent('on'+type,fn)        }else{            el['on'+type] = fn;        };    };    function removeEvent(el,type,fn){        if(el.removeEventListener != undefined){            el.removeEventListener(type,fn,false);        }else if(el.detachEvent != undefined){            el.detachEvent('on'+type,fn);        }else{            el['on'+type] = function(){};        };    };    function move(oldPos,target,t,l){        return function(e){            var newPos = getMousePos(e);            target.style.top = t + (newPos.top - oldPos.top) + 'px';            target.style.left = l + (newPos.left - oldPos.left) + 'px';        };    };    function getElementPos(el){        var x = 0,y=0;        if(el.getBoundingClientRect){            var pos = el.getBoundingClientRect();            var d_root = document.documentElement,db = document.body;            x = pos.left + Math.max(d_root.scrollLeft,db.scrollLeft) - d_root.clientLeft;            y = pos.top + Math.max(d_root.scrollTop,db.scrollTop) - d_root.clientTop;        }else{            while(el != db){                x += el.offsetLeft;                y += el.offsetTop;                el = el.offsetParent;            };        };        return {            x:x,            y:y        };    };    function ajax(opts){        var xhr = null;        var set = extend({            type:'GET',            url:''        },opts||{});        if(typeof window.XMLHttpRequest != 'undefined'){            xhr = new window.XMLHttpRequest();        }else{            xhr = new ActiveXObject('MSXML2.XmlHttp.6.0');        };        xhr.open(set.type,set.url);        xhr.onreadystatechange = function(){            if(xhr.readyState == 4){                if(xhr.status >= 200 && xhr.status <= 304 ){                    set.success && set.success(xhr.responseText);                }else{                    set.failure && set.failure(xhr.status);                };            };        };        xhr.send(null);    }})(window);

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title></title></head><body style="height:2000px;"><input type="button" name="" value="alert" id="btn_alert" /><input type="button" name="" value="confirm" id="btn_confirm" /><input type="button" name="" value="prompt" id="btn_prompt" /><input type="button" name="" value="load" id="btn_load" /><input type="button" name="" value="loadIframe" id="btn_loadIframe" /><select><option name="" value="1">test</option><option name="" value="1">test</option><option name="" value="1">test</option></select><script type="text/javascript" src="dialog.js"></script><script type="text/javascript">var btn_alert = document.getElementById('btn_alert'),btn_confirm = document.getElementById('btn_confirm'),btn_prompt = document.getElementById('btn_prompt'),btn_load = document.getElementById('btn_load'),btn_loadIframe = document.getElementById('btn_loadIframe');regMethod(window,'sbi');btn_alert.onclick = function(){sbi.alert({'content':'你現在測試的是alert!'})};btn_confirm.onclick = function(){sbi.confirm({'content':'你現在測試的是confirm!','callback':function(v){alert(v)}})};btn_prompt.onclick = function(){sbi.prompt({'content':'你現在測試的是prompt!','defaultValue':"說點什麼吧，親！",'callback':function(v){alert(v)}})};btn_load.onclick = function(){sbi.load({'content':'loadTest.html','callback':function(v){alert('內容載入完成！')}})};btn_loadIframe.onclick = function(){sbi.loadIframe({'content':'http://www.baidu.com','height':300,'width':500,'callback':function(v){alert('iframe內容載入完成！')}})};</script></body></html>

CSS:

* {padding: 0;margin: 0;}body {font-family: ;font-size: 12px;}#dialog_window{ background: #fff; width: 400px;border: 2px solid #999;}#dialog_title {background: #f8f8f8; padding: 0 10px; height: 36px; line-height: 36px; text-align: right; cursor: move;}#dialog_title h3 {font-size: 12px; color: #333; float: left;}a#dialog_btn_close { color: #333; text-decoration: none;}#dialog_Content { padding: 10px; clear: both;}#dialog_btnBox {padding: 5px 0; background: #f8f8f8; text-align: center;}#dialog_btn_enter, #dialog_btn_cancel { display: inline-block; *display: inline; *zoom:1; padding: 5px 15px; background: blue; color: #fff;margin-right: 10px;border: 0;}#diaglo_prompt_input { display:block; border: 1px solid #ddd; padding: 5px; width:90%; margin: 8px 0;}

說明：對外提供了alert,confirm,prompt,load,loadIframe,close 6個方法，前三種不需要解釋了吧，load方法就是用ajax載入一個HTML代碼片斷，loadIframe就是載入一個iframe了,close則是關閉當前顯示的彈窗。

注意：為了避免命名衝突，我這裡寫了一個註冊命名空間的函數regMethod，比如你取個名字為fuck，那麼在調用alert等方法之前要調用 regMethod(window,'fuck');這樣就可以這樣調用fuck.alert(),fuck.confirm()，又比如你有自己的JS庫，有自己的對象，你也可以直接把它註冊到你的對象上var xx00 = {}, regMethod(window,xx00['dialog']);這樣就可以通過xxoo.dialog.alert(),xxoo.dialog.confirm()來調用了。