分享一个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%"> 更改口令</td><td style="width:50%" align="right"><img src="data: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"> </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代码都失败了，所以你想写一些javascript验证的代码的话，还不能用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);
分享一个ASP.NET的弹出层，比较好用！的更多相关文章
- layer.js,,,分享一个好用的弹出层
基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...
- layer —— 一个简单的jQuery弹出层插件
layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...
- webui-popover 一个轻量级的jquery弹出层插件
该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css js 文件 <link rel="s ...
- 一个简单的div弹出层的小例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 转 js一个简单实用的弹出层
关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...
- 分享一个JQuery弹出层插件
JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...
- layer弹出层框架alert与msg详解
ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...
- 基于jQuery弹出层图片动画查看代码
分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&q ...
- LODOP内嵌挡住浏览器的div弹出层
首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...
随机推荐
- CodeForces 598A（水）
还是要注意int和long long的范围,以及double型的问题 pow函数经常会报一个double型的错,参考这篇文章 http://blog.csdn.net/lawrencesgj/arti ...
- ZOJ 1049 判断坐标点
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=49 水题 #include<iostream> #include&l ...
- THUSC2018退役预定
Day-inf \(HNOI,CTSC,APIO\)都爆炸了之后 好不容易找回自信心,怀着一定报不上的心情报了清华 居然报上了怕不是报了的都通过了 毕竟\(wc\)的时候被清华虐惨了 还是很虚的 Da ...
- JS计算十万块钱 分31期 利息万分之五 每个月的还款数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS核心内容：层叠和继承
实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...
- 常用的自动化测试框架及测试框架的发展（Alpha）
前言:自动化测试在过去的20年已经有了很大的发展.最初的测试工具只提供了简单的捕捉/回访功能,维护性较差.而且脚本工具实现需要很强的开发技术和经验,而且数量众多的测试脚本加上没有文档记录因此维护起来较 ...
- Java Web开发中的转发和重定向的问题
Java Web的页面实现跳转有两种方式,一种是转发,另外一种是重定向.一般来说,转发比重定向快.重定向会经过客户端,转发却不会. 转发 request.getRequestDispatcher(&q ...
- Software Testing Techniques Homework 3
1. a.This is the chart b. initial numPrimes = 4, t1 would over the loop. c. t = ( n = 1) d. node cov ...
- java笔记--匿名内部类和静态内部类的理解和使用
匿名内部类 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3889467.html "谢谢-- 1.由于局部内部类并不可见 ...
- 关于webWorker的理解和简单例子
一.理解 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿 ...