加载网页时弹出div

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

2.写好弹出层

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

实例：

popdiv.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);
		}
	});

}

压缩文件下载：
http://download.csdn.net/detail/zidane_2014/9599357