实现一个粗糙的dialog模板
这只是一个比较粗糙的dialog，实现功能有是可移动的，可关闭的，调用的函数就是一个opendialog，有四个参数，第一个是dialog的配置参数，第二个参数是我们传进我们自己想要编写的dom元素，占据到该dialog的主体位置，第三个参数是当我们的dialog加载完成之后，我们的回调函数，第四个参数是当我们关闭这个dialog的之前，我们调用的回调函数。 该dialog依赖于我写的另外一个为了简写代码的工具包base.js
base.js代码如下：

function $id(eltid){return document.getElementById(eltid);}/** *  把一个string 类型转换成一个dom 我们只是返回第一个元素 */function parsetoDom(string){var div = document.createElement("div");div.innerHTML = string;return div.firstChild;}function isIE() {if ("\v" == "v")return true;elsereturn false;}function Trim(str){return str.replace(/(^\s*)|(\s*$)/g, "");}/** * 过滤空格 */function spaceFilter(element){var childarray = element.childNodes;for(var i = 0;i<childarray.length;i++){if(childarray[i].nodeName == "#text" && ! /\S/.test(childarray[i].nodeValue)){           element.removeChild(childarray[i]);//如果该元素为空格则删除    }}return element.childNodes;}function getAjaxRequest() {var request = false;try {request = new XMLHttpRequest();} catch (IE) {try {request = new ActiveXObject("Msxml2.XMLHTTP");} catch (othermicrosoft) {try {request = new ActiveXObject("Microsoft.XMLHTTP");} catch (failed) {request = false;}}}return request;}/** * 构建建议的ajax参数 * options{url:"",data,dataType,callback * @param options */function Ajax(options){var request = getAjaxRequest();var url     = options.url;var data    = null || options.data;var dataType = (options.dataType || 'GET').toLocaleUpperCase() == 'POST'?'POST':'GET';var callback = options.callback;//回调函数var facade   = function(callback){if (request.readyState == 4) {if (request.status == 200) {var responseText = request.responseText;callback && callback(responseText);}}};try{request.open(dataType,url,true);if(dataType == "POST")request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); request.onreadystatechange = function(){facade(callback);};request.send(data);}catch(e){throw e;return ;}}

dialog.js代码如下：

/** * 这个js创建自己的对话框，依赖于base.js */var timeHal;//自己创建的element作为缓存存下来var elecache;/** * 当前默认下的dialog的布局管理 */var optionargs = {"left":"200","top":"300","width":"450","height":"300","id":"dialog","content":"请输入内容"};function pageSize() {var body = document.documentElement;var bodyOffsetWidth = 0;var bodyOffsetHeight = 0;var bodyScrollWidth = 0;var bodyScrollHeight = 0;var pageDimensions = [ 0, 0 ];pageDimensions[0] = body.clientHeight;pageDimensions[1] = body.clientWidth;bodyOffsetWidth = body.offsetWidth;bodyOffsetHeight = body.offsetHeight;bodyScrollWidth = body.scrollWidth;bodyScrollHeight = body.scrollHeight;windowavailHeight = window.screen.availHeight;windowavailWidth = window.screen.availWidth;if (bodyOffsetHeight > pageDimensions[0]) {pageDimensions[0] = bodyOffsetHeight;}if (bodyOffsetWidth > pageDimensions[1]) {pageDimensions[1] = bodyOffsetWidth;}if (bodyScrollHeight > pageDimensions[0]) {pageDimensions[0] = bodyScrollHeight;}if (bodyScrollWidth > pageDimensions[1]) {pageDimensions[1] = bodyScrollWidth;}if (windowavailHeight > pageDimensions[0]) {pageDimensions[0] = windowavailHeight;}if (windowavailWidth > pageDimensions[1]) {pageDimensions[1] = windowavailWidth;}return pageDimensions;}/** * 制作一个movespan */function createMoveSpan(){var closespan = document.createElement("span");//display: inline-block;width: 432px;closespan.style.display = "inline-block";closespan.style.width   = (parseInt(optionargs.width) - 20) + "px";closespan.innerHTML     = optionargs.content;closespan.onmousedown = drag;return closespan;}/** * close img */function createCloseImg(closecallback){var img = document.createElement("img");img.src = "jsdir/dialog/img/close.gif";img.id = "closesign";img.onclick = function() {var dialog = document.getElementById(optionargs.id);var disablediv = document.getElementById("disablepage");document.body.removeChild(dialog);document.body.removeChild(disablediv);window.clearTimeout(timeHal);closecallback && closecallback(elecache);};return img;}/** * 创建包装好closeimg 和 movespan */function createLayerWrapper(closecallback){var layer = document.createElement("div");//定义stylelayer.style.left = "0px";layer.style.height = "20px";layer.style.border = "solid 1px gray";layer.style.background = "gray";layer.style.width = (parseInt(optionargs.width) - 2) + "px";//接收子elementlayer.appendChild(createMoveSpan());layer.appendChild(createCloseImg(closecallback));return layer;}function initargs(options){options  = options || optionargs;//如果不==，表示的是我们传递的有参数的if(options != optionargs){if(options.left)optionargs.left = options.left;if(options.top)optionargs.top  = options.top;if(options.width)optionargs.width = options.width;if(options.height)optionargs.height = options.height;if(options.id)optionargs.id = options.id;if(options.content)optionargs.content = options.content;}}/** * 创建一个dialog并且对其属性进行初始化 */function createDialog(options) {initargs(options);var dialog = document.createElement("div");dialog.style.position = "absolute";dialog.style.border = "solid 1px";dialog.style.display = "none";dialog.style.zIndex = "10001";dialog.style.top    = optionargs.top + "px";dialog.style.left   = optionargs.left + "px";dialog.style.width  = optionargs.width + "px";dialog.style.height = optionargs.height + "px";dialog.style.background = "white";dialog.id           = optionargs.id;return dialog;}/** * 创建一个能够遮罩整个body的div */function createDisablePageDiv() {var disable = document.createElement("div");var page = pageSize();disable.id = "disablepage";disable.style.position = "absolute";disable.style.left = "0px";disable.style.top = "0px";disable.style.width = page[1];disable.style.height = page[0];disable.style.zIndex = "10000";disable.style.background = "#333";disable.style.textAlign = "center";disable.style.filter = "alpha(opacity=0)";disable.style.opacity = 0;disable.style.display = "none";disable.style.cursor  = "move";return disable;}/** * 拖曳的事件 */function drag(e) {e = e || event;//获得的是span的Nodevar target = e.target || e.srcElement;//外层的dialog Domvar element = target.parentNode.parentNode;if (document.addEventListener) {document.addEventListener("mousemove", startDrag, true);document.addEventListener("mouseup", stopDrag, true);} else {document.onmousemove = startDrag;document.onmouseup = stopDrag;}var deltaX = e.clientX - parseInt(element.style.left);var deltaY = e.clientY - parseInt(element.style.top);function startDrag(e) {var el = e || event;element.style.left = el.clientX - deltaX + "px";element.style.top = el.clientY - deltaY + "px";};function stopDrag() {if (document.removeEventListener) {document.removeEventListener("mousemove", startDrag, true);document.removeEventListener("mouseup", stopDrag, true);} else {document.onmousemove = "";document.onmouseup = "";}};return true;}function addMask() {timeHal = window.setTimeout(addMask, 20);}/** * @param options dialog的配置参数 * @param callback 启动显示一个dialog之后，我们要做的工作 * @param closecallback 关闭dialog之后，我们要做的工作 */function opendialog(options,element,callback,closecallback) {var dialog = createDialog();var disablepage = createDisablePageDiv();var layer = createLayerWrapper(closecallback);dialog.appendChild(layer);if(!element)return false;if(typeof(element) == "string" && element.length == 0)return false;if(typeof(element) == "string")dialog.innerHTML  = dialog.innerHTML + element;try{dialog.appendChild(element);}catch(e){return false;}elecache = element;document.body.appendChild(dialog);document.body.appendChild(disablepage);dialog.style.display = "block";disablepage.style.display = "block";addMask();callback && setTimeout(function() {callback();}, 500);return true;}

这个缺点是我使用的关闭是一个图片，所以当我配置的时候需要在dialog源代码里面自己配图片的路径