js弹出窗口特效

最新推荐文章于 2023-09-27 08:50:07 发布

le4

最新推荐文章于 2023-09-27 08:50:07 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/openlms/article/details/8663692

版权

JS弹出特效

<!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>
<style type="">
body {
	color: #ooo;
	font: 87.5%/1.5 Arial, sans-serif;
}
</style>
<script>
	function sAlert(strTitle, strContent) {
		var msgw, msgh, bordercolor;
		msgw = 400;//提示窗口的宽度 
		msgh = 300;//提示窗口的高度 
		titleheight = 25 //提示窗口标题高度 
		bordercolor = "#336699";//提示窗口的边框颜色 
		titlecolor = "#99CCFF";//提示窗口的标题颜色
		var sWidth, sHeight;
		sWidth = document.body.offsetWidth;
		sHeight = screen.height - 190;
		var bgObj = document.createElement("div");
		bgObj.setAttribute('id', 'bgDiv');
		bgObj.style.position = "absolute";
		bgObj.style.top = "0";
		bgObj.style.background = "#777";
		bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
		bgObj.style.opacity = "0.6";
		bgObj.style.left = "0";
		bgObj.style.width = sWidth + "px";
		bgObj.style.height = sHeight + "px";
		bgObj.style.zIndex = "10000";
		document.body.appendChild(bgObj);

		var msgObj = document.createElement("div")
		msgObj.setAttribute("id", "msgDiv");
		msgObj.setAttribute("align", "center");
		msgObj.style.background = "white";
		msgObj.style.border = "1px solid " + bordercolor;
		msgObj.style.position = "absolute";
		msgObj.style.left = "50%";
		msgObj.style.top = "50%";
		msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
		msgObj.style.marginLeft = "-225px";
		msgObj.style.marginTop = -140 + document.documentElement.scrollTop
				+ "px";
		msgObj.style.width = msgw + "px";
		msgObj.style.height = msgh + "px";
		msgObj.style.textAlign = "center";
		msgObj.style.lineHeight = "25px";
		msgObj.style.zIndex = "10001";

		var title = document.createElement("h4");
		title.setAttribute("id", "msgTitle");
		title.setAttribute("align", "right");
		title.style.margin = "0";
		title.style.padding = "3px";
		title.style.background = bordercolor;
		title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
		title.style.opacity = "0.75";
		title.style.border = "1px solid " + bordercolor;
		title.style.height = "18px";
		title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
		title.style.color = "white";
		title.style.cursor = "pointer";
		title.title = "点击关闭";
		title.innerHTML = "<table border='0′ width='100%'><tr><td align='center'><b>"
				+ strTitle + "</b></td><td>关闭</td></tr></table></div>";
		title.onclick = function() {
			document.body.removeChild(bgObj);
			document.getElementById("msgDiv").removeChild(title);
			document.body.removeChild(msgObj);
		}
		document.body.appendChild(msgObj);
		document.getElementById("msgDiv").appendChild(title);
		var txt = document.createElement("p");
		txt.style.margin = "1em 0"
		txt.setAttribute("id", "msgTxt");
		str = "<br /><br /><form action=\"userServlet?prams=updateInfo\" method=\"post\" ><table border=\"1\" cellspacing=\"0\"  align=\"center\"><tr><td>学位论文题目</td><td><input type=\"text\" name=\"degreePaperTitle\"></td><tr>"
				+ "<tr><td>指导老师</td><td><input type=\"text\" name=\"guideTeacher\"></td><tr>"
				+ "<tr><td>研究方向</td><td><input type=\"text\" name=\"studyDirection\"></td><tr>"
				+ "<tr><td colspan=\"2\"><input type=\"submit\" value=\"确定\"></td><tr>"
				+ "<input type=\"hidden\" name=\"prams\" value=\"updateInfo\"/>"
				+ "</table></form>";

		txt.innerHTML = str;
		document.getElementById("msgDiv").appendChild(txt);
	}
</script>
</head>

<body background="images/bg1.png">
	
		<input name="Submit" type="button" class="button" id="Submit"
			οnclick="sAlert('','');" value="完善信息"
			style="width: 110px;height: 40px;background-image: url('images/btn_bg.png');color: white;font-size: 16px;">
		
</body>
</html>

效果如下

le4

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js弹出窗口特效

JS弹出特效个人信息body { color: #ooo; font: 87.5%/1.5 Arial, sans-serif;} function sAlert(strTitle, strContent) { var msgw, msgh, bordercolor; msgw = 400;//提示窗口的宽度 msgh = 300;//提示窗口的高度
复制链接

扫一扫