js弹出蒙版、弹出框

<!DOCTYPE HTML>
<html> 
<head> 
<style type="text/css"> 
.popWindow { 
background-color:#9D9D9D; 
width: 100%; 
height: 100%; 
left: 0; 
top: 0; 
filter: alpha(opacity=50); 
opacity: 0.5; 
z-index: 1; 
position: absolute; 

} 
.maskLayer { 
background-color:#fff; 
width: 30%;
height: 20%; 
line-height: 30px; 
left: 38%; 
top: 40%; 
color:#000; 
z-index: 2; 
position: absolute; 
text-align:center; 
}
</style> 
<script language="javascript" type="text/javascript"> 
function showDiv() { 
document.getElementById('popWindow').style.display = 'block'; 
document.getElementById('maskLayer').style.display = 'block'; 
} 
function closeDiv() { 
document.getElementById('popWindow').style.display = 'none'; 
document.getElementById('maskLayer').style.display = 'none'; 
}
function payDuccess(){
	document.getElementById('popWindow').style.display = 'none'; 
	document.getElementById('maskLayer').style.display = 'none'; 
	alert("跳转");
}
</script> 
</head> 
<body> 
<div onclick="showDiv()" style="display:block; cursor:pointer"> 
弹出蒙板 
</div> 
<div id="popWindow" class="popWindow" style="display: none;"> 
</div> 
<div id="maskLayer" class="maskLayer" style="display: none;"> 
<a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;"> 
关闭蒙板 
</a>
<p><p><p><p>
<div style="color:red">
请确认是否支付成功?
</div>
<p><p><p><p>
<input type="button" value="支付成功" onclick="closeDiv()">
<a href="#" onclick="closeDiv()" style=""> 
支付遇到问题?
</a>
</div> 
</body> 
</html> 

 

你可能感兴趣的:(js弹出蒙版、弹出框)