一个修改后灵活调用div弹出层

最新推荐文章于 2024-10-30 19:10:39 发布

digmouse

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量2.3k

点赞数

文章标签： div javascript server function asp button

本文链接：https://blog.csdn.net/digmouse/article/details/3728965

版权

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>弹出层</title>
    <script type="text/javascript" language="javascript">
    var STO; //--设置隔一定时间执行操作的对象
    
        function ShowNo(tm,div) //隐藏两个层
        {
            document.getElementById(tm).style.display="none";
            document.getElementById(div).style.display="none";
            clearTimeout(STO);
        }
        function $(id) //获取对象的方法      
        {
            return (document.getElementById) ? document.getElementById(id) : document.all[id] ;
        }
        function showFloat(tm,div) //根据屏幕的大小显示两个层
        {
            var setTime = 100; //设置相隔时间
            //var HFrom,HTo;s
        
            var range = getRange();
            rangerange.height = range.height + document.body.scrollTop;
            tm1=document.getElementById(tm);
            div1=document.getElementById(div);
            tm1.style.width = range.width + "px";
            tm1.style.height = range.height + "px";
            tm1.style.display = "block";
            var h = document.documentElement.scrollTop + parseInt((document.documentElement.clientHeight-div1.style.height)/2,10);
            div1.style.top = h + "px";
            //document.getElementById(div).style.display="";
            div1.style.display="";
            STO = setTimeout (function(){showFloat(tm,div);}, setTime);
        }
        
        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>
<style type="text/css">
    body
    {
        margin: 0px;
    }
</style>
</head>
<body style="margin:0;">
<!--用js控制显示-->
<form id="form1" runat="server">
 //测试:点击弹出层+随页面滚动而滚动<br />        <a href="javascript:void(0)" onclick="showFloat('doing','divLogin')">点击这里弹出</a>
<!--加一个半透明层-->
<div id="doing" style="filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;
    background-color: #000; width: 100%; height: 100%; z-index: 1000; position: absolute;
    left: 0; top: 0; display: none; overflow: hidden;">
</div>
<!--加一个层-->
<div id="divLogin" style="border: solid 5px #898989; background: #fff; padding: 10px;
    width: 480px; z-index: 1001; position: absolute; display: none; left: 50%;
    margin: -200px 0 0 -400px;">
    <div style="padding: 3px 15px 3px 15px; text-align: left; vertical-align: middle;">
        <div>
            用户：
            <asp:textbox id="TxtUserName" runat="server"> </asp:textbox>
        </div>
        <div>
            密码：
            <asp:textbox id="TxtUserPwd" runat="server" textmode="Password"> </asp:textbox>
        </div>
        <br />
        <div>
               
            <aspx:button id="BttLogin" runat="server" text=" 登 陆 " />
             
            <input id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo('doing','divLogin')" />
        </div>
    </div>
</div>
</form>
</body>
</html>
 