弹窗半透明

最新推荐文章于 2021-06-21 15:36:03 发布

chqm120

最新推荐文章于 2021-06-21 15:36:03 发布

阅读量394

点赞数

本文链接：https://blog.csdn.net/chqm120/article/details/11908947

版权

1.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 

<head>
<title>点击弹出居中窗口-蚂蚁部落</title>
<style type="text/css"> 
.Div_Scroll 
{ 
  position:fixed; 
  margin:-10px; 
  visibility:hidden; 
  background-color:#808080; 
  opacity:0.6; 
  z-index:99; 
} 
.Div_Scroll_Content 
{ 
  position:relative; 
  margin-top:20%; 
  width:inherit; 
  height:inherit; 
} 
.Div_AlertWindow 
{ 
  margin:auto; 
  width:200px; 
  height:100px; 
  background-color:lightblue; 
  border:5px solid #f00; 
} 
</style> 
<script type="text/javascript"> 
window.οnlοad=function ()
{ 
  var alertWindow=$("alertParent"); 
  var Sure=$("Sure");
  var alertButton=$("alertButton");
  alertWindow.style.width=window.screen.availWidth+"px"; 
  alertWindow.style.height=window.screen.height+"px"; 
  Sure.οnclick=function()
  { 
    alertWindow.style.visibility="hidden"; 
	 var Div_Scroll_Content=$("Div_Scroll_Content");
  Div_Scroll_Content.style.visibility="hidden";
  } 
  alertButton.οnclick=ShowAlert;
} 
function ShowAlert() 
{ 
  var alertWindow=$("alertParent"); 
  var Div_Scroll_Content=$("Div_Scroll_Content");
  alertWindow.style.visibility="visible"; 
  Div_Scroll_Content.style.visibility="visible";
}  
$=function(id)
{ 
  return document.getElementById(id); 
} 
</script> 
</head>
<div id="alertParent" class="Div_Scroll">
  <div id="Div_Scroll_Content" class="Div_Scroll_Content"> 
  <div id="AlertWindow" class="Div_AlertWindow"> 
    <input type="button" id="Sure" value="关闭窗口" /> 
  </div> 
</div> 
 </div>  
<body> 

<div> 
djsakdhsajkdsa<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <input id="alertButton" type="button" value="点击弹出窗口"/> 
</div> 
</body> 
</html>

2.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 

<head>
<title>点击弹出居中窗口-蚂蚁部落</title>
<style type="text/css"> 
.Div_Scroll 
{ 
  position:fixed; 
  margin:-10px; 
  visibility:hidden; 
  background-color:#808080; 
  opacity:0.6; 
  z-index:99; 
} 
.Div_Scroll_Content 
{ 
  position:relative; 
  margin-top:20%; 
  width:inherit; 
  height:inherit; 
} 
.Div_AlertWindow 
{ 
  margin:auto; 
  width:200px; 
  height:100px; 
  background-color:lightblue; 
  border:5px solid #f00; 
} 
</style> 
<script type="text/javascript"> 
function onclick_t(){
var alertWindow=$("alertParent"); 
  var Sure=$("Sure");
  var alertButton=$("alertButton");
  alert(alertWindow);
  alertWindow.style.width=window.screen.availWidth+"px"; 
  alertWindow.style.height=window.screen.height+"px";
document.getElementById("alertParent").style.visibility="visible"; 
	 var Div_Scroll_Content=$("Div_Scroll_Content"); 
document.getElementById("Div_Scroll_Content").style.visibility="visible";	 
}
 
$=function(id)
{ 
  return document.getElementById(id); 
} 
</script> 
</head>
<div id="alertParent" class="Div_Scroll">
  <div id="Div_Scroll_Content" class="Div_Scroll_Content"> 
  <div id="AlertWindow" class="Div_AlertWindow"> 
    <input type="button" id="Sure" value="关闭窗口" /> 
  </div> 
</div> 
 </div>  
<body> 

<div> 
djsakdhsajkdsa<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <input id="alertButton" type="button" οnclick="onclick_t()" value="点击弹出窗口"/> 
</div> 
</body> 
</html>