实现一个粗糙的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;
	else
		return 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");
	//定义style
	layer.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";
	//接收子element
	layer.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的Node
	var target = e.target || e.srcElement;
	//外层的dialog Dom
	var 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源代码里面自己配图片的路径