asp.net弹出层实例
大家好，又见面了，我是全栈君
<%@ 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>操作一</li>
<li>操作二</li>
<li><asp:Button ID="btnShow" runat="server" Text="操作三（点击我弹出层）" OnClientClick="return ShowBlock();" /></li>
<li>操作四</li>
<li>操作五</li>
</ul>
</div>
<!--弹出层，-->
<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>
弹出层，平时在隐藏状态，这里能够放控件，载入数据。操作数据等。
</div>
<div>
<asp:Button ID="BtnOperation" runat="server" Text="操作button" OnClientClick="return Operate();"/>
<asp:Button ID="BttCancel" runat="server" Text="关闭" 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>
源代码地址：http://download.csdn.net/detail/yayun0516/8264489
版权声明：本文博客原创文章。博客，未经同意，不得转载。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/117540.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年1月4，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
