当前位置:网站首页>asp. Net pop-up layer instance

asp. Net pop-up layer instance

2022-07-05 23:15:00 Full stack programmer webmaster

Hello everyone , I meet you again , I'm the king of the whole stack

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestASPNetNewBlock._Default" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <ul>
      <li> Operation 1 </li>
      <li> Operation two </li>
      <li><asp:Button ID="btnShow" runat="server" Text=" Operation three ( Click me to pop up the layer )" OnClientClick="return ShowBlock();" /></li>
      <li> Operation 4 </li>
      <li> Operation 5 </li>
     </ul>
    </div>

    <!-- Pop-up layer ,-->   
    <div id="divNewBlock" style=" border:solid 1px;padding:10px;width:600px;z-index:1001; 
        position: absolute; display:none;top:50%; left:10%;margin:-50px;">
            <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" >
                <div>
                    Pop-up layer , Usually in a hidden state , Controls can be placed here , Load data . Operation data, etc .
                </div>
                <div>     
                    <asp:Button ID="BtnOperation" runat="server" Text=" operation button" OnClientClick="return Operate();"/> 
                    
                    <asp:Button ID="BttCancel"  runat="server" Text=" close " OnClientClick="return HideBlock();" />
                </div>
            </div>
      </div> 
    </form>
</body>

<script type="text/javascript" language="javascript">
    function HideBlock() {
        document.getElementById("divNewBlock").style.display = "none";
        return false;
    }

    function ShowBlock() {
        var set = SetBlock();
        document.getElementById("divNewBlock").style.display = "";
        return false;
    }

    function SetBlock() {
        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 Operate() {
        return false;
    }
    </script>
</html>

Source code address :http://download.csdn.net/detail/yayun0516/8264489

Copyright notice : This article is an original blog article . Blog , Without consent , Shall not be reproduced .

Publisher : Full stack programmer stack length , Reprint please indicate the source :https://javaforall.cn/117540.html Link to the original text :https://javaforall.cn

原网站

版权声明
本文为[Full stack programmer webmaster]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/186/202207052301273044.html