asp.net,网页层与div的数据交互

最新推荐文章于 2025-09-03 20:18:32 发布

Bookworm_Leaf

最新推荐文章于 2025-09-03 20:18:32 发布

阅读量979

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔录文章标签： div asp.net server button asp javascript

本文链接：https://blog.youkuaiyun.com/Bookworm_Leaf/article/details/2988297

学习笔录专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用DIV实现的登录层与半透明遮罩层的案例，详细讲解了如何通过JavaScript来控制这些层的显示与隐藏，并实现了屏幕适配。此外还介绍了如何获取登录层中复选框的选择值。

这几天忙着一个模块的开发,真是差点没把我弄疯了!现在终于叹口气了,解决了几个大问题!

在我做的那个模块里涉及到div的相对位置的设置,网页层与div显示层之间数据的传递,之前我对div根本就不了解,经过这么一折腾啊,不得不明白了!好了，言归正传!

这是我的试验例子,有点乱,多多包含:

代码部分:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" language="javascript"> 
        function ShowNo()                        //隐藏两个层  
        { 
            document.getElementById("doing").style.display="none"; 
            document.getElementById("divLogin").style.display="none"; 
            getCheckValue();
        } 
        function $(id)        
        { 
            return (document.getElementById) ? document.getElementById(id) : document.all[id] ; 
        } 
        function showFloat(leftlocal)                    //根据屏幕的大小显示两个层  
        { 
            var range = getRange(); 
        
            $('doing').style.width = range.width + "px"; 
            $('doing').style.height = range.height + "px"; 
            $('doing').style.display = "block"; 
            document.getElementById("divLogin").style.display=""; 
            
        } 
        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 } ; 
        }
        
       function getCheckValue()
       {
            var theBox=document.all("divLogin")
            var str=""
            elm=theBox.getElementsByTagName('Input')
            for(i=0;i<elm.length;i++)
            {
                if(elm[i].type=="checkbox")
                {
             
                    if (elm[i].checked==true)
                    {
                        //获得客户端checkbox的值
                        str+=elm[i].nextSibling.innerText+",";
                    }
                }
            }
          
            document.getElementById("txtValue").value=str;
             document.getElementById("Hidden1").value=str;
              //document.write(document.getElementById("txtValue").value); 
       }
    
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Div显示层</title>
</head>
<body>
    <form id="form1" runat="server">
  
        <br />
        <br />
        <br />
        <p>
            <input id="Hidden1" type="hidden" runat="server" />
        </p>
        <asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
        <!--<a href="javascript:void(0)" onclick="">登陆 </a>//登陆链接--> 
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>
        <input type="button" value="登陆" onclick="showFloat()" />
        <input id="txtValue" type="text" onfocus="showFloat()" />
       
           <!--加一个半透明层-->
      <div id="doing" style="filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;
            background-color: Gray; width: 100%; height: 100%; z-index: 1000; position: absolute;
            left: 0; top: 0; display: none; overflow: hidden;">
        </div>
        <!--加一个登录层-->
        <div id="divLogin" style="background: #fff; padding: 10px 0 0 200px; width: 560px;
            z-index: 1001; position: relative; display: none; left: expression(document.getElementById('<%=this.txtBox.ClientID %>').offsetLeft+200+ 'px');
            ); top: expression(document.getElementById('<%=this.txtBox.ClientID%>').offsetTop+150+ 'px');
            margin: -200px 0 0 -400px; border-right: silver 1px solid; border-top: silver 1px solid;
            border-left: silver 1px solid; border-bottom: silver 1px solid;">
            <div style="padding: 3px 15px 3px 15px; text-align: left; vertical-align: middle;">
                <div>
                    <h4>
                        请选择你要发送的对象</h4>
                    用户：
                    <asp:TextBox ID="TxtUserName" runat="server"> </asp:TextBox>
                </div>
                <div style="border-top-width: 1px; border-left-width: 1px; border-left-color: silver;
                    border-bottom-width: 1px; border-bottom-color: silver; border-top-color: silver;
                    border-right-width: 1px; border-right-color: silver;">
                    密码：
                    <asp:TextBox ID="TxtUserPwd" runat="server" TextMode="Password"> </asp:TextBox>
                </div>
                <br />
                <div>
                       
                    <asp:Button ID="BttLogin" runat="server" Text=" 登 陆 " /> 
                    <input id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo()" />
                </div>
                <div style="width: 100%">
                    <table width="100%" border="1">
                        <tr>
                            <td align="right">
                                </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Panel ID="Panel1" runat="server" Direction="LeftToRight" ScrollBars="Auto" Width="100%"
                                    Height="90px" HorizontalAlign="Center">
                                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="8" Width="95%">
                                        <asp:ListItem Value="0">文件</asp:ListItem>
                                        <asp:ListItem Value="2">数码</asp:ListItem>
                                        <asp:ListItem Value="1">书本</asp:ListItem>
                                        <asp:ListItem Value="3">电器</asp:ListItem>
                                        <asp:ListItem Value="4">娱乐</asp:ListItem>
                                        <asp:ListItem Value="5">军事</asp:ListItem>
                                        <asp:ListItem Value="36">地球</asp:ListItem>
                                        <asp:ListItem Value="89">环境</asp:ListItem>
                                        <asp:ListItem Value="3">经济</asp:ListItem>
                                        <asp:ListItem Value="3">政治</asp:ListItem>
                                        <asp:ListItem Value="3">电器</asp:ListItem>
                                        <asp:ListItem Value="3">娱乐</asp:ListItem>
                                        <asp:ListItem Value="3">军事</asp:ListItem>
                                        <asp:ListItem Value="3">地球</asp:ListItem>
                                        <asp:ListItem Value="3">环境</asp:ListItem>
                                        <asp:ListItem Value="3">经济</asp:ListItem>
                                    </asp:CheckBoxList>
                                </asp:Panel>
                                
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
         
    </form>
</body>
</html>