分享一个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="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">&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代码都失败了，所以你想写一些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等浏览器 ...

随机推荐

js-js的语句
- Java里面的语句: ** if判断 *** =:表示赋值 *** ==:表示判断 ** switch语句 ** 循环 for while do-while - js里面的也是这些语句 ** if ...
BZOJ1492 [NOI2007]货币兑换
Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...
护航SMB网络安全应选择新一代防火墙
当前,各种规模的企业都遭遇着日益增多的网络攻击,而其中以中小企业(SMB)为代表的广大群体则更加面临敏感数据.公司资产和知识产权不断暴露在风险中的窘境.为了帮助企业应对这一挑战,新一代防火墙的采购与部 ...
移动端H5开发之渲染引擎
渲染引擎浏览器渲染引擎,负责解析 HTML, CSS,javascript的DOM部分,如桌面浏览器一般手机端也有4个比较重要的渲染引擎 Gecko,Trident,WebKit,Blink . 黑 ...
IOS xcode安装
xcode软件下载地址: 可以通过虚拟机共享文件夹将xcode传递给虚拟机上的os系统: 第一个程序创建:
使用NodeJs搭建的小型web应用
原文英文链接:http://www.nodebeginner.org 中文翻译链接:http://www.nodebeginner.org/index-zh-cn.html 学习链接:一本全面的Nod ...
结对编程——Java实现黄金分割点游戏
这是我和队员根据老师要求自创的一个人机黄金分割点游戏.这个小游戏在Windows10 下开发,用Eclipse做开发工具,实现语言是Java. 利用目前自己所学的Java知识实现了一人登录,电脑自行匹 ...
JAVA后台框架优化之日志篇
1.日志规范各业务系统日志需要统一,以方便查看.收集日志, 日后统一ELK日志管理,以下为项目的日志配置, 这是兼容当前系统的日志,以后推行微服架构时会有变动,但日志存放方式不会改变,日后会推行sp ...
sql server2008安装时提示重启计算机失败怎么办？
在键盘上按下组合键[Win]+[R],调出运行窗口. 在窗口中输入“regedit”,点击确定,打开注册表管理界面. 在注册表左侧目录栏中找到如下位置:“HKEY_LOCAL_MACHINE\SYST ...
awk 正则表达式、正则运算符详细介绍
前言:使用awk作为文本处理工具,正则表达式是少不了的. 要掌握这个工具的正则表达式使用.其实,我们不必单独去学习它的正则表达式.正则表达式就像一门程序语言,有自己语法规则已经表示意思. 对于不同工具 ...

分享一个ASP.NET的弹出层，比较好用！

分享一个ASP.NET的弹出层，比较好用！的更多相关文章

随机推荐

热门专题