当前位置： 代码迷 >> JavaScript >> js 自定义弹出 揭示
  详细解决方案

js 自定义弹出 揭示

热度：501   发布时间：2012-08-25 10:06:20.0
js 自定义弹出 提示
/* JavaScript Document */

/* 页面MASK的对象ID */
var PAGE_MASK_ID = "page-mask-id";

/* 页面MASK对象的样式类名 */
var MASK_CLASS_NAME = "dlg-mask";

/* 页面UNMASK对象的样式类名 */
var UNMASK_CLASS_NAME = "dlg-unmask";

/* 页面对话框对象显示的样式类名 */
var DIALOG_CLASS_SHOW = "dialog-show";

/* 页面对话框对象隐藏的样式类名 */
var DIALOG_CLASS_HIDE = "dialog-hide";

var PAGE_IFRAME_MASK = "parge-iframe-for-mask-dialog";
var titleText = "提示";
var okText = "确定";
var cancelText = "取消";

/**
 * 
 * @param id  id
 * @param contentText 提示内容
 * @param promptCallback 点击确定时绑定的函数
 */
function showDialogs (id, contentText, promptCallback) {
	createDialog(id, contentText, promptCallback);
	appshowDialog(id, 300);
};
function removeChildNodes(dialog) {
	var childs = dialog.childNodes;
	for ( var i = childs.length - 1; i >= 0; i--) {
		dialog.removeChild(childs[i]);
	}
}
function createDialog(id, contentText, promptCallback) {
	var dialog = document.getElementById(id);// dialog
	if (!dialog) {
		dialog = document.createElement("div");
		dialog.id = id;
	}
	removeChildNodes(dialog);
	dialog.className = DIALOG_CLASS_SHOW;
	var u1 = document.createElement("U");
	u1.className = "f1";
	var u2 = document.createElement("U");
	u2.className = "f2";
	var u3 = document.createElement("U");
	u3.className = "f3";
	dialog.appendChild(u1);
	dialog.appendChild(u2);
	dialog.appendChild(u3);

	var titleDiv = document.createElement("div");
	titleDiv.className = "d_top";
	dialog.appendChild(titleDiv);
	var titleName = document.createElement("span");
	titleName.innerHTML = titleText;
	titleDiv.appendChild(titleName);

	var imageherf = document.createElement("a");
	imageherf.href = "javascript:void(0);";
	var imageClose = document.createElement("img");
	imageClose.src = "/rts/images/pupsnow_003.gif";
	imageClose.border = "0";
	imageherf.appendChild(imageClose);
	titleDiv.appendChild(imageherf);
	var content = document.createElement("div");
	content.className = "d_body";
	var promptImage = document.createElement("img");
	promptImage.src = "/rts/images/!.png";
	promptImage.border = "0";
	promptImage.align = "absmiddle";
	content.appendChild(promptImage);
	content.appendChild(document.createTextNode(contentText));

	content.appendChild(document.createElement("br"));
	content.appendChild(document.createElement("br"));
	dialog.appendChild(content);

	var center = document.createElement("div");
	center.align = "center";
	content.appendChild(center);
	var okButton = document.createElement("input");
	okButton.type = "button";
	okButton.className = "alert-okButton";
	okButton.value = okText;
	center.appendChild(okButton);

	var cancelButton = document.createElement("input");
	cancelButton.type = "button";
	cancelButton.className = "alert-cancelButton";
	cancelButton.value = cancelText;
	center.appendChild(cancelButton);

	var foot = document.createElement("div");
	foot.className = "d_foot";
	dialog.appendChild(foot);

	var u4 = document.createElement("U");
	u1.className = "f1";
	var u5 = document.createElement("U");
	u2.className = "f2";
	var u6 = document.createElement("U");
	u3.className = "f3";
	dialog.appendChild(u6);
	dialog.appendChild(u5);
	dialog.appendChild(u4);

	document.body.appendChild(dialog);

	okFunction = function() {
		cancel(id);
		if (promptCallback)
			promptCallback(id);
	};

	cancelFunction = function hideDialog() {
		cancel(id);
	};
	imageherf.onclick = cancelFunction;
	okButton.onclick = okFunction;
	cancelButton.onclick = cancelFunction;
	appshowDialog(id, 300);
}
function appshowDialog(dialog, width) {
	if ((typeof dialog) == "string") {
		dialog = document.getElementById(dialog);
	}
	if (!dialog) {
		return;
	}
	dialogMask();
	/* 改变样式 */
	dialog.className = DIALOG_CLASS_SHOW;
	dialog.style.display = '';

	dialog.style.width = width + "px";
	// dialog.style.height = height + "px";
	/* 可拖动 */
	// drag(dialog);
	/* 调整位置至居中 */
	center(dialog, width);
	if (navigator.appName == 'Microsoft Internet Explorer') {
		var mif = document.getElementById(PAGE_IFRAME_MASK);
		if (!mif) {
			mif = document.createElement('iframe');
			mif.className = 'mask-if';
			mif.id = PAGE_IFRAME_MASK;
			document.body.appendChild(mif);
		}
		mif.style.top = dialog.style.top;
		mif.style.left = dialog.style.left;
		mif.style.width = width + "px";
		mif.style.height = parseInt(dialog.offsetHeight, 10) + "px";
		mif.style.display = 'block';
	}
}

/* 页面MASK */
function dialogMask() {
	doMask(true);
	window.onresize = onWinResize;
}

/* 当窗口大小改变时，如果是mask状态，则调整大小，以遮盖整个页面 */
function onWinResize() {
	var objMask = document.getElementById(PAGE_MASK_ID);
	if (objMask == null) {
		return;
	}
	if (objMask.className != MASK_CLASS_NAME) {
		return;
	}
	var width;
	var height;
	if (navigator.appName == 'Microsoft Internet Explorer') {
		width = document.documentElement.scrollWidth;
		height = document.documentElement.scrollHeight;
	} else {
		width = document.body.scrollWidth;
		height = document.body.scrollHeight;
	}
	objMask.style.width = width + "px";
	objMask.style.height = height + "px";
}/* onWinResize */
function doMask(mask) {
	var width;
	var height;
	if (navigator.appName == 'Microsoft Internet Explorer') {
		width = document.documentElement.scrollWidth;
		height = document.documentElement.scrollHeight;
	} else {
		if (document.documentElement.scrollHeight) {
			width = document.documentElement.scrollWidth;
			height = document.documentElement.scrollHeight;
		} else {
			width = document.body.scrollWidth;
			height = document.body.scrollHeight;
		}
	}
	/* 显示MASK */
	var objMask = document.getElementById(PAGE_MASK_ID);
	if (!objMask) {
		objMask = document.createElement("div");
		objMask.id = PAGE_MASK_ID;
		document.body.appendChild(objMask);
	}
	objMask.className = mask ? MASK_CLASS_NAME : UNMASK_CLASS_BAME;
	objMask.style.width = width + "px";
	objMask.style.height = height + "px";
}/* doMask(mask) */

/* 对话框居中，参数：dlgId对话框div的id */
function center(dialog, width) {
	if ((typeof dialog) == "string") {
		dialog = document.getElementById(dialog);
	}
	if (dialog == null && dialog.style.display == "none") {
		return;
	}
	var left = 8;
	var top = 8;
	if (window.innerWidth) {
		left = window.pageXOffset + ((window.innerWidth - width) / 2 - 32)
				+ "px";
		top = window.pageYOffset + ((window.innerHeight - dialog.offsetHeight))
				/ 2 + "px";
	} else {
		var scrolled = 0;
		if (document.documentElement && document.documentElement.scrollTop) {
			scrolled = document.documentElement.scrollTop;
		} else if (document.body) {
			scrolled = document.body.scrollTop;
		}
		var doc = document.documentElement;
		left = (doc.scrollLeft + (doc.offsetWidth - width) / 2 - 32) + "px";
		top = scrolled
				+ (document.documentElement.offsetHeight - dialog.offsetHeight)
				/ 2 + "px";
	}
	dialog.style.left = left;
	dialog.style.top = top;
}/* center(dlgId, width, height) */

function cancel(dialog) {
	var mif = document.getElementById(PAGE_IFRAME_MASK);
	if (mif) {
		mif.style.display = 'none';
	}
	if ((typeof dialog) == "string") {
		dialog = document.getElementById(dialog);
	}
	if (dialog != null) {
		dialog.className = DIALOG_CLASS_HIDE;
	}
	dlgunmask();
}/* cancel(dlgId) */

/* 页面unmask */
function dlgunmask() {
	var objMask = document.getElementById(PAGE_MASK_ID);
	if (objMask != null) {
		objMask.className = UNMASK_CLASS_NAME;
	}
	window.onresize = null;
}
引用
生成的html
<div id="dia" class="dialog-show" style="width: 300px; left: 538px; top: 310.5px;"><u class="f1"></u><u class="f2"></u><u class="f3"></u><div class="d_top"><span>提示</span><a href="javascript:void(0);"><img border="0" src="/rts/images/pupsnow_003.gif"></a></div><div class="d_body"><img border="0" align="absmiddle" src="/rts/images/!.png">预约设备失败，不能预约过去的时间段<br><br><div align="center"><input type="button" class="alert-okButton" value="确定"><input type="button" class="alert-cancelButton" value="取消"></div></div><div class="d_foot"></div><u></u><u></u><u></u></div>
引用
相关css


.dialog-show {
    padding: 0px;;
    position: absolute;
    display: block;
    z-index: 5000;
}U {DISPLAY: block;OVERFLOW: hidden;HEIGHT: 1px}
U.f1 {background-color:#5cc;BACKGROUND: #5cc;MARGIN: 0px 3px}
U.f2 {background-color:#5cc;BORDER-RIGHT: #5cc 2px solid;MARGIN: 0px 1px;BORDER-LEFT: #5cc 2px solid}
U.f3 {background-color:#5cc;BORDER-RIGHT: #5cc 1px solid;MARGIN: 0px 1px;BORDER-LEFT: #5cc 1px solid}
.d_top{clear:both;overflow:hidden;background-color:#5cc;height:29px;vertical-align:bottom;}
.d_top a{float:right;margin-top:5px;margin-right:13px;padding-top:3px;width:18px;color:red;text-decoration:none;font-weight:bold;text-align:center;vertical-align:middle;}
.d_top span{float:left;font-size:14px;margin-left:15px;margin-top:8px; color:#FFF; font-weight:bold}
.d_body {BORDER-RIGHT: #5cc 3px solid;BORDER-LEFT: #5cc 3px solid;padding:10px; background-color:#fff; color:#666}
.d_foot{clear:both;overflow:hidden;background-color:#5cc;height:2px;}
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.