html模拟弹窗

来源:互联网 发布:office365 for mac 编辑:程序博客网 时间:2024/05/07 02:48


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文件</title>
<style type="text/css">
 *{
  margin:0;
  padding:0;
 }
 
 html,body{
  width:100%;
  height:100%;
 }
 
 #mask{
  position:absolute;
        z-index:888;
        background-color:#cccccc;
        display:none;
        top:0;
        left:0;
        filter:Alpha(opacity=50);/*此处用于IE不透明度为半透明百分比*/
        -moz-opacity:0.5; /*此处用于火狐不透明数值*/
        opacity:0.5;/*此处用于新版火狐不透明数值*/
 }
 
 #view{
  position:absolute;
  width:450px;
  height:450px;
  z-index:999;/*视图div的z-index要大于遮罩层的*/
  display:none;
  top:0px;
  left:50%;
  background-color:#ffffff;
  border:1px solid green;
 }
</style>
<script type="text/javascript">
    function showDiv(){
        var mask = document.getElementById("mask");
  var view = document.getElementById("view");   
       
  /*计算出当前页面的大小*/
        var h_c =document.documentElement.scrollHeight;
        var w_c = document.documentElement.scrollWidth;       
        var h_b = document.body.scrollHeight;
        var w_b = document.body.scrollWidth ;       
        var height = h_c > h_b ? h_c : h_b;
  var width = w_c > w_b ? w_c : w_b;
  
  
  /*显示遮罩层*/
        mask.style.width = width+"px";
        mask.style.height = height+"px";       
        mask.style.display = "block";
  
  /*显示视图层*/
  
  /*450为div的宽*/
  view.style.left = (width-450)/2 + "px";
  /*450为div的高*/
  view.style.top = document.documentElement.scrollTop+(document.body.clientHeight-450)/2 + "px";
  
  view.style.display="block"; 
    }
   
    function hiddenDiv(){
  var view = document.getElementById("view");
  view.style.display = "none";
        var mask = document.getElementById("mask");   
        mask.style.display = "none";  
    }
</script>
</head>

<body>
 <div>
   <p>模拟原始页面,<a href="javascript:showDiv();">弹出窗口</a></p>
   <p>模拟原始页面,<a href="javascript:showDiv();">弹出窗口</a></p>
  
   <p>模拟原始页面,<a href="javascript:showDiv();">弹出窗口</a></p>
  
   <p>模拟原始页面,<a href="javascript:showDiv();">弹出窗口</a></p>
 </div>
   
    <!--全屏覆盖-->
    <div id="mask">     
    </div>
 <div id="view"><a href="javascript:hiddenDiv();">关闭窗口</a></div>
</body>
</html>