html模拟弹窗

最新推荐文章于 2021-10-16 09:21:16 发布

一剑十年

最新推荐文章于 2021-10-16 09:21:16 发布

阅读量894

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/li5147705/article/details/9612741

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

一剑十年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html模拟弹窗

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文件 *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } #mask
复制链接

扫一扫