自定义弹出对话框效果for IE and Firefox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>自定义弹出对话框</title> <script language="javascript" type="text/javascript"> var Class = { create: function() { return function() { return this.init.apply(this, arguments); } } }; Object.extend = function(dest, source) { for (prop in source) { dest[prop] = source[prop]; } return dest; } Object.extend(String.prototype, { Trim : function() { return this.replace(/(^\s*) | (\s*$)/g, ""); }, lTrim : function() { return this.replace(/(^\s*)/g, ""); }, rTrim : function() { return this.replace(/(\s*$)/g, ""); } }) Function.prototype.bind = function() { var __method = this, args = $A(arguments), object = args.shift(); return function() { return __method.apply(object, args.concat($A(arguments))); } } function $(id) { return document.getElementById(id); } var $A = function(iterable) { if (!iterable) return []; if (iterable.toArray) { return iterable.toArray(); } else { var results = []; for (var i = 0; i < iterable.length; i++) results.push(iterable[i]); return results; } } function OKTag(a, b, c, value) { alert("arguments : \n" + a + " : " + b + " : " + c + "; \n value = " + value); //Todo... } var CustomDlg = Class.create(); CustomDlg.prototype = { init: function(id, callback_func) { if (!this._dlg) { this._bShowStatus = false; this._dlg = $(id); this._form = this._dlg.getElementsByTagName("form")[0]; this._inputObj = this._form.elements["content"]; this._OKBtn = this._form.elements["OK"]; this._ResetBtn = this._form.elements["reset"]; this._closeBtn = $("CustomDlg_Close"); this._DlgTitle = $("CustomDlg_TitleBar"); this._form.onsubmit = function(evt) { //OK Event if (callback_func) { var rtnValue = this._getValue(); this._close(); callback_func(rtnValue); } return false; //防止提交到服务器 }.bind(this); this._ResetBtn.onclick = function(evt) { //Reset Event this._inputObj.focus(); }.bind(this); this._closeBtn.onclick = function(evt) { //Destory Event this._close(); }.bind(this); window.onresize = function(evt) { //Change Window Event if ("none" != this._dlg.style.display) this._show(); }.bind(this); this._dlg.onselectstart = function(evt) { if (!evt) evt = window.event; var srcElem = evt.target || evt.srcElement; if (srcElem != this._inputObj) return false; }.bind(this); this._DlgTitle.style.cursor = "default"; this._DlgTitle.onmousedown = function(obj, limit, evt) { //Drag Event this._fDragging(obj, evt, limit); }.bind(this, this._dlg, false); //注意参数传递方式，也可以写成下面这样 /* DlgTitle.onmousedown = function(evt) { this._fDragging(this._dlg, evt, false); }.bind(this); */ } if (!this._bShowStatus) this._show(); }, _show: function() { this._bShowStatus = true; this._dlg.style.visibility = "hidden"; this._dlg.style.display = ""; var dLeft = ((document.documentElement.clientWidth - this._dlg.clientWidth) / 2) + document.documentElement.scrollLeft; var dTop = ((document.documentElement.clientHeight - this._dlg.clientHeight) / 2) + document.documentElement.scrollTop; if (dTop < 0 || dLeft < 0) { this._inputObj.blur(); return false; } this._dlg.style.left = dLeft + "px"; this._dlg.style.top = dTop + "px"; this._dlg.style.visibility = "visible"; this._inputObj.focus(); if (document.addEventListener) { document.addEventListener('keydown', this._keypress.bind(this), true); } else if (document.attachEvent) { document.attachEvent('onkeydown', this._keypress.bind(this)); } }, _close: function() { this._bShowStatus = false; this._dlg.style.display = "none"; this._dlg.style.visibility = "hidden"; this._inputObj.value = ""; this._inputObj.blur(); if(document.addEventListener) { document.removeEventListener('keydown', this._keypress.bind(this), true); } else if(document.attachEvent) { document.detachEvent('onkeydown', this._keypress.bind(this)); } }, _reset: function() { //this._inputObj.value = ""; this._inputObj.focus(); //IE 的一个Bug， 不能自动聚焦 }, _keypress: function(evt) { if (!evt) evt = window.event; switch(evt.keyCode) { case 27: this._close(); break; //Esc Key be press down case 13: this._OKBtn.click(); break; //Enter Key be press down default: break; } }, _getValue: function() { return this._inputObj.value; }, _fDragging: function(obj, evt, limit) { if(!evt) evt = window.event; var x = parseInt(obj.style.left); var y = parseInt(obj.style.top); var x_ = evt.clientX - x; var y_ = evt.clientY - y; if(document.addEventListener) { document.addEventListener('mousemove', inFmove, true); document.addEventListener('mouseup', inFup, true); } else if(document.attachEvent) { document.attachEvent('onmousemove', inFmove); document.attachEvent('onmouseup', inFup); } inFstop(evt); inFabort(evt); function inFmove(evt) { if (!evt) evt = window.event; if (limit) { var op = obj.parentNode; var opX = parseInt(op.style.left); var opY = parseInt(op.style.top); if ((evt.clientX - x_) < 0) return false; else if ((evt.clientX - x_ + obj.offsetWidth + opX) > (opX + op.offsetWidth)) return false; if (evt.clientY - y_ < 0) return false; else if ((evt.clientY - y_ + obj.offsetHeight + opY) > (opY + op.offsetHeight)) return false; //status=e.clientY-y_; } obj.style.left = evt.clientX - x_ + 'px'; obj.style.top = evt.clientY - y_ + 'px'; inFstop(evt); } function inFup(evt) { if (!evt) evt = window.event; if (document.removeEventListener) { document.removeEventListener('mousemove', inFmove, true); document.removeEventListener('mouseup', inFup, true); } else if (document.detachEvent) { document.detachEvent('onmousemove', inFmove); document.detachEvent('onmouseup', inFup); } inFstop(evt); } function inFstop(evt) { if (evt.stopPropagation) return evt.stopPropagation(); else return evt.cancelBubble = true; } function inFabort(evt) { if (evt.preventDefault) return evt.preventDefault(); else return evt.returnValue = false; } } } </script> </head> <body> <div style="display:block; position:absolute;width:100px;height:25px;top:100px;"> <a onclick="new CustomDlg('CustomDlg', OKTag.bind(this, '1', '2', '3'))" style="cursor:pointer">点击弹出自定义对话框</a> </div> <div style="display:block; position:absolute;width:100px;height:25px;top:700px;"> <a onclick="new CustomDlg('CustomDlg', OKTag.bind(this, 'a', 'b', 'c'))" style="cursor:pointer">点击弹出自定义对话框</a> </div> <div style="display:block; position:absolute;width:100px;height:25px;top:1200px;"> <a onclick="new CustomDlg('CustomDlg', OKTag.bind(this, '你', '好', '吗'))" style="cursor:pointer">点击弹出自定义对话框</a> <a name="abc" href="#abc">abcanchor</a> </div> <div id="CustomDlg" style="display:none"> <div class="TitleBar" id="CustomDlg_TitleBar">请输入标签<span id="CustomDlg_Close">X</span></div> <form onsubmit="return false;" method="get" action="#"> <div class="Content"> <p>标签与标签之间用空隔分割，单个标签不能超过30字符：</p> <input class="Input" type="text" name="content" maxlength="255" size="30" /> <div> <input type="submit" name="OK" class="Btn" value="确 定" /> <input type="reset" name="reset" class="Btn" value="重 写" /> </div> </div> </form> </div> <style type="text/css"> #CustomDlg { position:absolute; background:#f1f1f1; width:230px; font-size:12px; text-align:left; border:1px solid #ccc; } #CustomDlg .TitleBar { background:#369; text-align:left; text-indent:0.5em; height: 20px; line-height:20px; color:#FFF; -moz-user-select: none; -khtml-user-select: none; user-select: none; } #CustomDlg .TitleBar span { float:right; margin-top:-20px; margin-right: 4px; cursor: pointer; display:block; font-weight:bold; font-family:Arial, Helvetica, sans-serif; } #CustomDlg form { padding: 0px; margin: 6px; } #CustomDlg .Content{ text-align:center;} #CustomDlg .Content p{padding:5px 5px 2px 5px; margin: 0px; text-align:left;-moz-user-select: none;-khtml-user-select: none;user-select: none;} #CustomDlg .Content .Input{width:210px; height:18px; line-height:18px;} #CustomDlg .Btn { margin: 2px 6px; border-bottom: groove 1px #000000; border-right: groove 1px #000000; width: 64px; height: 22px; line-height: 18px; cursor:pointer; } </style> </body> </html> [ 可先修改部分代码 再运行查看效果 ]
