弹出层DIV

最新推荐文章于 2021-06-08 11:50:44 发布

klp1988

最新推荐文章于 2021-06-08 11:50:44 发布

阅读量85

点赞数

本文链接：https://blog.csdn.net/klp1988/article/details/84179618

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <script>
  function shownoall(num)//这个是关闭层
    {
    var divv1="doing"+num;
    var divv2="divLogin"+num;
    document.getElementById(divv1).style.display="none";
    document.getElementById(divv2).style.display="none";
    }
    
    function showfloatall(num)//这个是显示要弹出的层
    {
      var range = getRange();
          var divvv1="doing"+num;
           var divvv2="divLogin"+num;
            document.getElementById(divvv1).style.width = range.width + "px";
            document.getElementById(divvv1).style.height = range.height + "px";
            document.getElementById(divvv1).style.display = "block";
            document.getElementById(divvv2).style.display="block";
    }

        function getRange()                      //得到屏幕的大小
        {
              var top     = document.body.scrollTop;
              var left    = document.body.scrollLeft;
              var height  = document.body.clientHeight;
              var width   = document.body.clientWidth;

              if (top==0 && left==0 && height==0 && width==0) 
              {
                top     = document.documentElement.scrollTop;
                left    = document.documentElement.scrollLeft;
                height  = document.documentElement.clientHeight;
                width   = document.documentElement.clientWidth;
              }
              return  {top:top  ,left:left ,height:height ,width:width } ;
        } 


 
 
 </script>

 <body>

 <img src="images/search.gif"  id="searchinfo" οnclick="showfloatall(6);"/>


    <div id="doing6"  style="filter:alpha(opacity=50);-moz-opacity:0.3;opacity:0.3;background-color:#cccccc; display:none;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;overflow: hidden;">
    </div>    
    <!--加一个登录层  读取专业信息--> 
    <div id="divLogin6"  style="border:solid 8px #74B1D6;display:none;background:#fff;width:655px;z-index:1001;position: absolute;top:50%; left:50%;margin:-200px 0 0 -400px;">
            <div id="Div4" style=" background:#FFFFFF;margin:3px 10px 10px 15px;text-align:left;vertical-align:middle;" >
                  <div class="div_tit">
                  
                 <a href="#" class="close" οnclick="shownoall(6);">关闭</a></div>
      <span style="margin-left:20px; color:Blue; display:none;" id="Span1">正在读取数据，请稍后....</span>
                  <div id="Div5" class="div_list">
                                     显示数据                  

                  </div>
                          </div>
            </div>


 </body>
</html>

代码贴出去可以直接运行的