加载网页时弹出div

最新推荐文章于 2024-04-27 21:35:02 发布

Zidane_2014

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量3.7k

点赞数 2

分类专栏：前端学习文章标签： JavaScript css html div

本文链接：https://blog.csdn.net/zidane_2014/article/details/52166362

版权

前端学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1.利用body的οnlοad=" "

2.写好弹出层

3.加载时会自动弹出写好的div

实例：

popdiv.html

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf8" />
    <title>弹出div测试</title>
    <link rel="stylesheet" type="text/css" href="./changepwd.css">
    <link rel="stylesheet" type="text/css" href="./pop.css">
</head>

<body οnlοad="showDiv()">
    <div id="popDiv" class="mydiv" style="display: none;">
        <h1 style="color: white; font-family: 黑体; margin-top: 10px; margin-bottom: 30px;">修改密码</h1>
        <div class="contact-form">
            <div class="signin">
                <div id="pwd1">
                    <input id="oldpwd" type="password" placeholder="请输入原密码" οnblur="validate(this)" />
                </div>
                <div id="wrongpwd"></div>
                <div id="pwd2">
                    <input id="newpwd1" type="password" placeholder="请输入新密码(3-15位英文及数字)" />
                </div>
                <div id="pwd3">
                    <input id="newpwd2" type="password" placeholder="请再次输入原密码" />
                </div>
                <div id="pwd4">
                    <input id="edit" type="button" value="修改" οnclick="subForm();" />
                    <input id="cancel" type="button" οnclick="closeDiv()" value="取消">
                </div>
            </div>
        </div>

    </div>
    <div id="bg" class="bg" style="display: none;"></div>
    <iframe id='popIframe' class='popIframe' frameborder='0'></iframe>
</body>

<script type="text/javascript" src="./changepwd.js"></script>

</html>

pop.css

html,body {
	height: 100%;
	margin: 0px;
	font-size: 12px;
}

.mydiv {
	filter: Alpha(Opacity = 90);
	-moz-opacity: 0.9;
	opacity: 0.9;
	background-color: #0D0D0D;
	border: 0px solid;
	text-align: center;
	line-height: 40px;
	font-size: 12px;
	font-weight: bold;
	z-index: 999;
	left: 45%;
	top: 30%;
	margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */
	margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/
	margin-top: 0px;
	position: fixed !important; /* FF IE7*/
	position: absolute; /*IE6*/
	_top: expression(eval(document.compatMode &&
            document.compatMode == 'CSS1Compat')?
            documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)/2:
		/*IE6*/
            document.body.scrollTop+ (document.body.clientHeight- this.clientHeight)/2);
	/*IE5 IE5.5*/
}

.bg,.popIframe {
	background-color: black;
	display: none;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0; /*FF IE7*/
	filter: alpha(opacity = 30); /*IE*/
	opacity: 0.3; /*FF*/
	z-index: 1;
	position: fixed !important; /*FF IE7*/
	position: absolute; /*IE6*/
	_top: expression(eval(document.compatMode &&
            document.compatMode == 'CSS1Compat')?
            documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)/2:
		/*IE6*/
            document.body.scrollTop+ (document.body.clientHeight- this.clientHeight)/2);
}

.popIframe {
	filter: alpha(opacity = 0); /*IE*/
	opacity: 0; /*FF*/
}

changepwd.css

#oldpwd {
	width: 260px;
	height: 30px;
}

#wrongpwd {
	color: red;
	height: 20px;
	line-height: 20px;
	text-align: left;
	float: middle;
	margin-left: 100px;
}

#newpwd1 {
	margin: 15px 30px 15px 30px;
	width: 260px;
	height: 30px;
}

#newpwd2 {
	margin: 15px 30px 15px 30px;
	width: 260px;
	height: 30px;
}

#edit {
	font-size: 25px;
	width: 110px;
	height: 35px;
	background-color: red;
	color: white;
	border-radius: 10px;
	border: 0px;
	font-family: 黑体;
	margin-right: 15px;
}

#cancel {
	font-size: 25px;
	width: 110px;
	height: 35px;
	background-color: #666666;
	color: white;
	border-radius: 10px;
	border: 0px;
	font-family: 黑体;
	margin-right: 15px;
}

#pwd1 {
	margin: 15px 60px 0px 60px;
}

#pwd2 {
	margin: 0px 60px 15px 60px;
}

#pwd3 {
	margin: 15px 60px 15px 60px;
}

#pwd4 {
	margin-top: 40px;
	margin-bottom: 20px;
}

changepwd.js

var status = 0;
var xmlHttp;
function createXMLHttpRequest() {
	// 表示当前浏览器不是ie,如ns,firefox
	if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
}
function validate(field) {
	if (field.value.trim().length != 0) {
		// 创建Ajax核心对象XMLHttpRequest
		createXMLHttpRequest();

		var url = '/xxx?oldpwd='
				+ field.value.trim() + '&time=' + new Date().getTime();

		// 设置请求方式为GET，设置请求的URL，设置为异步提交
		xmlHttp.open("GET", url, true);

		// 将方法地址复制给onreadystatechange属性
		// 类似于电话号码
		xmlHttp.onreadystatechange = callback;

		// 将设置信息发送到Ajax引擎
		xmlHttp.send(null);
	} else {
		document.getElementById("spanUserId").innerHTML = "";
	}
}
// 回调函数
function callback() {
	// Ajax引擎状态为成功
	if (xmlHttp.readyState == 4) {
		// HTTP协议状态为成功
		if (xmlHttp.status == 200) {
			if (xmlHttp.responseText == "0") {
				status = 0;
				document.getElementById("wrongpwd").innerHTML = "原密码错误";
			} else if (xmlHttp.responseText == "1") {
				status = 1;
				document.getElementById("wrongpwd").innerHTML = "";
			}
		} else {
			alert("请求失败，错误码=" + xmlHttp.status);
		}
	}
}

function showDiv() {
	document.getElementById('popDiv').style.display = 'block';
	document.getElementById('popIframe').style.display = 'block';
	document.getElementById('bg').style.display = 'block';
};
function closeDiv() {
	document.getElementById('popDiv').style.display = 'none';
	document.getElementById('bg').style.display = 'none';
	document.getElementById('popIframe').style.display = 'none';
	document.getElementById('oldpwd').value = '';
	document.getElementById('newpwd1').value = '';
	document.getElementById('newpwd2').value = '';
	document.getElementById("wrongpwd").innerHTML = "";

};
function subForm() {
	var oldPasswd = document.getElementById("oldpwd").value;
	var newPasswd = document.getElementById("newpwd1").value;
	var confirmPasswd = document.getElementById("newpwd2").value;
	alert(oldPasswd + "&" + newPasswd + "&" + confirmPasswd);
	if (oldPasswd.length == 0) {
		return false;
	}
	if (newPasswd.length == 0) {
		return false;
	}
	if (confirmPasswd.length == 0) {
		return false;
	}

	// 设置status是一个全局变量，0代表原密码输入错误，禁止提交表单
	if (status == 0) {
		return false;
	}
	alert("111");
	$.post("/xxx", {
		"oldPasswd" : oldPasswd,
		"newPasswd" : newPasswd,
		"confirmPasswd" : confirmPasswd
	}, function(data) {
		if (data.isResultOk) {
			alert("修改成功，请重新登录");
			window.location.href = "/xxx";
		} else {
			alert(data.resultMsg);
		}
	});

}