您的位置：首页 > Web前端 > JavaScript

加载网页时弹出div

2016-08-09 21:38 856 查看

1.利用body的onload=" "

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 onload="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="请输入原密码" onblur="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="修改" onclick="subForm();" />
<input id="cancel" type="button" onclick="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);
}
});

}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript css html div

相关文章推荐

新的分享

章节导航