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

JS

(function(win){var tips = {'title':'信物寶提示','enter':'確定','cancel':'取消','close':'關(guān)閉'},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;};/*************************************對(duì)外提供的接口****************************************************/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':'你現(xiàn)在測(cè)試的是alert!'})};btn_confirm.onclick = function(){sbi.confirm({'content':'你現(xiàn)在測(cè)試的是confirm!','callback':function(v){alert(v)}})};btn_prompt.onclick = function(){sbi.prompt({'content':'你現(xiàn)在測(cè)試的是prompt!','defaultValue':"說點(diǎn)什么吧，親！",'callback':function(v){alert(v)}})};btn_load.onclick = function(){sbi.load({'content':'loadTest.html','callback':function(v){alert('內(nèi)容加載完成！')}})};btn_loadIframe.onclick = function(){sbi.loadIframe({'content':'http://www.baidu.com','height':300,'width':500,'callback':function(v){alert('iframe內(nèi)容加載完成！')}})};</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;}

說明：對(duì)外提供了alert,confirm,prompt,load,loadIframe,close 6個(gè)方法，前三種不需要解釋了吧，load方法就是用ajax加載一個(gè)HTML代碼片斷，loadIframe就是加載一個(gè)iframe了,close則是關(guān)閉當(dāng)前顯示的彈窗。

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

轉(zhuǎn)載于:https://www.cnblogs.com/sky000/archive/2013/02/05/2892953.html

總結(jié)

以上是生活随笔為你收集整理的模拟alert,confirm,prompt的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。