Simulate alert, confirm, prompt

The one I used in the previous project was also written by myself, but it was based on JQ. Recently, I saw that the JS question posted by Renren is similar to this one, so I used Native js to rewrite it again:

JS

(Function (WIN) {var tips = {'title': 'treasure trease', 'enter': 'OK', 'cancel': 'cancel', 'close ': '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 ;}; /********************************** externally *************************** * **********************/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 (o PTS. 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. valu E) ;}; 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; o PTS. 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 = '000000'; IFRAME. style. height = '000000'; IFRAME. frameborder = '0' _ this. doms. contentbox. innerhtml = ''; _ this. doms. c Ontentbox. 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. onm Ousedown = NULL; this. DOMs = NULL; isopen = false ;}}; dialog. prototype. init. prototype = dialog. prototype; win. regmethod = function (scope, Handler) {return scope [handler] = Dialog ();}; /*********************************** private method *** **************************************** * **********/function extend (subclass, superclass) {for (var key in superclass) subclass [Key] = superclass [Key]; return subclass ;}; F Unction createelements (OPTs) {var DB = document. body, H = math.max(document.doc umentelement. 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 (' <I Frame 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 =" dial Og_title "> 
HTML:
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd"> <HTML lang = "en"> 
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;}
Note: Alert, confirm, prompt, load, loadiframe, and close methods are provided externally. The first three methods do not need to be explained. The load method is to load an HTML code snippet using Ajax, loadiframe is to load an IFRAME, and close is to close the pop-up window currently displayed.
Note: To avoid naming conflicts, I have written a registry namespace function regmethod. For example, if you name it fuck, you must call regmethod (window, 'fuck'); then you can call the fuck. alert (), fuck. confirm (), for example, if you have your own JS library and your own object, you can also directly register it to your object var xx00 ={}, regmethod (window, xx00 ['Dialog ']); in this way, you can use xxoo. dialog. alert (), xxoo. dialog. confirm () is called.