类似新浪邮箱的JS提示窗口

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>类似新浪邮箱的提示窗口</TITLE>
</HEAD>
<BODY>
<form action="#">
<input name=btn1 type=button value=有自定义按钮 onclick=showalert1();>
<input name=btn2 type=button value=无自定义按钮 onclick=showalert2();>
</form>
<script language="javascript">

</script>
<script>
</style></head><body scroll=no leftmargin=0 topmargin=0>");
				window.imb_FormModal.document.write("<table width=100% height=100% bgcolor=\"#F6F8DF\"><tr><td  align=left bgcolor=#EDE808><div id=\"imb_Title\" style=\"padding-left:3px;padding-right:3px;\">");
				window.imb_FormModal.document.write("</div></td></tr><tr><td align=left><div id=\"imb_Content\" style=\"padding:7px;\">");
				window.imb_FormModal.document.write("</div></td></tr><tr><td id=\"imb_Body\" align=center>");
				window.imb_FormModal.document.write("</td></tr></table>");
				window.imb_FormModal.document.write("</body></html>");
				window.imb_FormModal.document.close();
			}
		}
		//显示对话框控件.
		this.ShowModal = function(iCaption, iMessage, iWidth, iHeight, iClickFunc, iOther){
			var smWidth = 420, smHeight = 180, smCaption = "默认对话框", smMessage="您确定执行这项操作吗?", smFunc, smObject, smAlpha, smInterval;
			if (arguments.length > 4 ){
				smWidth = iWidth;
				smHeight = iHeight;
				smCaption = iCaption;
				smMessage = iMessage;
				smFunc = iClickFunc;
			}
			//背景的渐显.
			function checkIMBAlpha(){
				smObject.style.filter = "alpha(opacity="+smAlpha+");";
				smAlpha += 10;
				if (smAlpha>80){
					clearInterval(smInterval);
				}
			}
			checkIMBObject();
			this.BackObject = document.getElementById("imb_Background");
			this.FormObject = document.getElementById("imb_FormModal");
			smObject = this.BackObject;
			smAlpha = 0;
			this.BackObject.style.left = 0;
			this.BackObject.style.top = 0;
			this.BackObject.style.width = document.body.scrollWidth;
			this.BackObject.style.height = document.body.scrollHeight;
			this.BackObject.style.visibility = "visible";
			smInterval = window.setInterval(checkIMBAlpha, 5);
			this.FormObject.style.left = document.body.clientWidth/2 - smWidth/2;
			this.FormObject.style.top = document.body.clientHeight/2 - smHeight/2;
			this.FormObject.style.width = smWidth;
			this.FormObject.style.height = smHeight;
			this.FormObject.style.visibility = "visible";
			window.imb_FormModal.document.getElementById("imb_Title").innerHTML = "<b>" + smCaption + "</b>" + " -- 操作提示";
			window.imb_FormModal.document.getElementById("imb_Content").innerHTML = smMessage;
			if (iOther==null || iOther==""){
				window.imb_FormModal.document.getElementById("imb_Body").innerHTML = "<input type=hidden id=imb_Other name=imb_Other shortKey=\"O\"> &nbsp; <input type=submit id=imb_Ok name=imb_Ok value=\"确定\" shortKey=\"T\"> &nbsp; <input type=button id=imb_Cancel name=imb_Cancel value=\"取消\" shortKey=\"C\">";
			}else{
				window.imb_FormModal.document.getElementById("imb_Body").innerHTML = "<input type=button id=imb_Other name=imb_Other value="+iOther+" shortKey=\"O\"> &nbsp; <input type=submit id=imb_Ok name=imb_Ok value=\"确定\" shortKey=\"T\"> &nbsp; <input type=button id=imb_Cancel name=imb_Cancel value=\"取消\" shortKey=\"C\">";
			}
			document.body.disabled = true;
			window.imb_FormModal.document.getElementById("imb_Ok").onclick= function(){
				parent.document.body.disabled = false;
				if (smFunc!=null && smFunc!=""){
					eval("parent." + smFunc.replace("$","1"));
				}
				parent.document.getElementById("imb_Background").style.visibility = "hidden";
				parent.document.getElementById("imb_FormModal").style.visibility = "hidden";
			}
			window.imb_FormModal.document.getElementById("imb_Cancel").onclick= function(){
				if (smFunc!=null && smFunc!=""){
					eval("parent." + smFunc.replace("$","2"));
				}
				parent.document.body.disabled = false;
				parent.document.getElementById("imb_Background").style.visibility = "hidden";
				parent.document.getElementById("imb_FormModal").style.visibility = "hidden";
			}
			window.imb_FormModal.document.getElementById("imb_Other").onclick= function(){
				if (smFunc!=null && smFunc!=""){
					eval("parent." + smFunc.replace("$","3"));
				}
				parent.document.body.disabled = false;
				parent.document.getElementById("imb_Background").style.visibility = "hidden";
				parent.document.getElementById("imb_FormModal").style.visibility = "hidden";
			}
		}
	}
//-->
</script>
</BODY>
</HTML>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

类似新浪邮箱的JS提示窗口

分类

表格图层

描述

模仿的新浪邮箱里的提示窗口，因为美化起来太麻烦了，本人美工不行，只是为了练手才写，它分为有自定义的按钮以及无自定义的按钮，功能模拟差不多都实现了，希望学习JS的朋友一起切磋。