ASP. NET 팝 업 층 을 공유 하 는 것 이 좋 습 니 다!

32936 단어 asp.net

인터넷 의 일부 팝 업 층 의 컨트롤 이 많아 졌 습 니 다. 저 는 오래 전에 하 나 를 사 용 했 는데 효과 가 좋 았 습 니 다. 그러나 ASP. NET 에 적용 하면 '팝 업 층 안의 컨트롤 runat =' server '가 효력 을 잃 었 습 니 다. 구체 적 인 상황 은 저도 잘 설명 하지 못 하지만 onclick, onchange 사건 은 모두 소 용이 없습니다.튀 어 나 온 층 위의 컨트롤 은 새로운 컨트롤 입 니 다. 위 에는 아무것도 없습니다. 아마도 스스로 ajax 와 같은 방법 을 써 서 데 이 터 를 백 엔 드 에 제출 할 수 밖 에 없 을 것 입 니 다.다음은 제 가 2 년 전에 사용 한 방법 을 소개 하 겠 습 니 다. 인터넷 으로 남 의 것 을 베 꼈 는데 지금 은 어디서 베 꼈 는 지 모 르 겠 습 니 다.오늘 에 야 좀 완벽 해 졌 다.아래 에 먼저 그것 의 원래 모습 을 붙 여 라.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="KBTelSystem.index" %>

<!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 id="Head1" runat="server">

<link href="css/style.css" rel="stylesheet" type="text/css" />

    <title>     -     </title>

</head>

<body>

    <form id="form1" runat="server">

        <div style="text-align:right; width:1024px">

            <a href="javascript:void(0);" onclick="openBg(1);openSelect('selectItem',1)">    </a>

        </div>

        

  <div id="bg"></div>

  <div class="hidden" id="selectItem">

  <div style="width:100%; height:24px; background-color:#6b96f7; float:left"><table width="100%"><tr><td style="width:50%">&nbsp;    </td><td style="width:50%" align="right"><img src="images/  .bmp" onclick="openBg(0);openSelect('selectItem',0)" onmousemove="this.src='images/  2.bmp'" onmouseout="this.src='images/  .bmp'" title="    " /></td></tr></table></DIV>

    <table width="600" border="0" align="left" cellpadding="2" cellspacing="0">

      <tr>

        <td width="240" height="16" align="right">&nbsp;</td>

        <td align="right"></td>

      </tr>

      <tr>

        <td width="240" height="34" align="right">

            <asp:Label ID="Label13" runat="server" 

                Text="   "></asp:Label>

          <asp:TextBox ID="tbOldPwd" runat="server" TextMode="Password" Width="148px"></asp:TextBox></td>

        <td align="right"><asp:Label ID="Label14" runat="server" Text="   "></asp:Label>

          <asp:TextBox ID="tbNewPwd" runat="server" TextMode="Password" Width="148px"></asp:TextBox></td>

      </tr>

      <tr>

        <td width="240" height="34" align="right"><asp:Label ID="Label15" runat="server" 

                Text="    "></asp:Label>

          <asp:TextBox ID="tbNewPwd1"

            runat="server" TextMode="Password" Width="148px"></asp:TextBox></td>

        <td align="right">

            <asp:Button ID="btnAlertPwd" runat="server" OnClick="btnAlertPwd_Click" 

                  Text="   " Width="65px"/>

          </td>

      </tr>

      <tr>

        <td width="240" height="8"></td>

        <td></td>

      </tr>

      </table>

  </div>

    </form>

    <script type="text/javascript">

        var grow = $("selectSub").getElementsByTagName("option").length; //  

        var showGrow = 0;//    

        var selectCount = 0; //     

        showSelect(showGrow);

        var items = $("selectSub").getElementsByTagName("input");

        //alert(maxItem);

        //var lenMax = 2; 

        //alert(1);

        function $(o){ //    

            if(typeof(o) == "string")

            return document.getElementById(o);

            return o;

        }

        function openBg(state){ //        

            if(state == 1)

            {

                $("bg").style.display = "block";

                var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;

            //alert(document.body.offsetHeight);

            //alert(document.documentElement.offsetHeight);

                $("bg").style.height = h + "px";

            }

            else

            {

                $("bg").style.display = "none";

            }    

        }

        function openSelect(id,state){ //         

            if(state == 1)    

            {

                $(id).style.display = "block";

                $(id).style.left = ($("bg").offsetWidth - $(id).offsetWidth)/2 + "px";

                $(id).style.top = document.body.scrollTop + 100 + "px";        

            }

            else

            {

                $(id).style.display = "none";

            }

        }

    </script>

</body>

</html>

 
 
위의 코드 를 자세히 보면 그 중 하 나 를 발견 할 수 있 습 니 다.
function $(o){ //    

    if(typeof(o) == "string")

      return document.getElementById(o);

      return o;

}

이것 은 나 쁜 점 이 있 습 니 다. 만약 당신 이 jquery 를 인용 하려 고 한다 면, 하하, jquery 코드 가 모두 실 패 했 습 니 다. 그래서 자 바스 크 립 트 가 검증 한 코드 를 쓰 려 고 한다 면, 아직 jquery 를 사용 할 수 없습니다. 답답 해 죽 겠 습 니 다. 그래서 이 글 이 있 습 니 다. 저 는 그것 을 jquery 를 호 환 하 는 것 으로 바 꾸 었 습 니 다. 다음 과 같 습 니 다.
<script type="text/javascript">

            function openBg(state) { //        

                if (state == 1) {

                 //        

                    var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;

                    $("#bg").css("height", h + "px");

                    $("#bg").show();

                }

                else {

                    $("#bg").hide();

                }

            }



            function openSelect(id, state) { //         

                if (state == 1) {

                    var showDiv = $("#" + id).css("width").replace('px', '');

                    var bgDiv = $("#bg").css("width").replace('px', '');

                    $("#" + id).css("margin-left", (bgDiv - showDiv) / 2 + "px");   //            

                    $("#" + id).css("margin-top", "100px");     //    ,      OK 

                    $("#" + id).show();

                }

                else {

                    $("#" + id).hide();

                }

            }

        </script>

 
 
호출 방법 에 대해 서 는 여전히 원문 과 같다.
openBg(1);openSelect('selectItem',1);

 

좋은 웹페이지 즐겨찾기