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="操作按钮" 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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。