http://blog.csdn.net/yysyangyangyangshan/article/details/38458169

在页面中用到弹出新页面的情况比较多的，一般来说都是使用JS方法
showModalDialog("新页面相对路径+?参数1&参数2",window,"新页面样式");然后会新弹出一个模态的page页。
而在有些时候，仅仅是显示一些单一的、少量的数据，或者一些简单的操作时。就没必要使用新弹出页面了。
此时，最好使用弹出层，也就是数据还是显示在当前页面的某个控件上，然后通过JS方法实现达到弹出的目的。
看下面的例子：

<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 5px;padding:10px;width:600px;z-index:1001;

        position: absolute; display:none;top:%; left:%;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 ==  && left ==  && height ==  && width == ) {

            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/yysyangyangyangshan/7734257

ASP.NET—013：实现带控件的弹出层（弹出框）的更多相关文章

  1. (转)客户端触发Asp.net中服务端控件事件

    第一章. Asp.net中服务端控件事件是如何触发的 Asp.net 中在客户端触发服务端事件分为两种情况: 一. WebControls中的Button 和HtmlControls中的Type为su ...

  2. asp.net学习之DataList控件

    asp.net学习之DataList控件   DataList控件与Repeater控件一样由模板驱动,与Repeater控件不同的是: DataList控件默认输出是一个HTML表格.DataLis ...

  3. asp.net学习之 数据绑定控件--List数据绑定控件

    原文:asp.net学习之 数据绑定控件--List数据绑定控件 List控件(如 CheckBoxList.DropDownList.ListBox 和 RadioButtonList 类)继承自L ...

  4. asp.netajax开发应用心得-accordation控件的事件处理

    今天,再次运行以前的项目时,发现按钮的单击事件不起作用了,加了断点之后发现根本没有触发该事件.... 按照网上找到的答案,有的说把控件删掉重新拖拽一个进去,虽然以前也遇到过控件失效,重新拖拽有效的时候 ...

  5. asp.net中的ListBox控件添加双击事件

    问题:在Aspx页里的ListBox A中添加双击事件,将选中项添加到另一个ListBox B中,双击ListBox B中的选中项,删除当前选中项 页面: <asp:ListBox ID=&qu ...

  6. asp.net学习之Repeater控件

    asp.net学习之Repeater控件 文章摘自:http://www.cnblogs.com/shipfi/archive/2009/10/19/1585703.html Repeater控件和D ...

  7. 《ASP.NET1200例》ListView 控件与DataPager控件的结合<二>

    ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示 为什么使用ListView+DataPager的方式实现分页显示? .net提供的诸多数据绑定控件,每一种都有它自己 ...

  8. ASP.NET中 WebForm 窗体控件使用及总结【转】

    原文链接:http://www.cnblogs.com/ylbtech/archive/2013/03/06/2944675.html ASP.NET中 WebForm 窗体控件使用及总结. 1.A, ...

  9. ASP.NET服务端基本控件介绍

    ASP.NET服务端基本控件介绍 大概分为三种控件: HTML控件,ASP.NET把HTML控件当成普通字符串渲染到浏览器端,不去检查正确性,无法在服务端进行处理ASP.NET服务端控件,经过ASP. ...

  10. asp.net学习之数据绑定控件、数据源控件概述

    原文:asp.net学习之数据绑定控件.数据源控件概述 1.asp.net数据绑定控件分为三大类,每个类分别进行详细:      ● 列表式数据绑定控件: 列表式数据绑定控件常用来在一个表格内的一个字 ...

随机推荐

  1. 一个初学者的辛酸路程-FTP-9

    前言 今天,我要描述一个FTP的故事 主要内容 嗯,今天主要以阶梯性的形式来做一个FTP项目. 第一步: 我要实现这么一个功能,一个FTP客户端,1个FTP服务端,2端建立连接以后可以进行通讯. 服务 ...

  2. LightOJ 1095 Arrange the Numbers-容斥

    给出n,m,k,求1~n中前m个正好有k个在原来位置的种数(i在第i个位置) 做法:容斥,先选出k个放到原来位置,然后剩下m-k个不能放到原来位置的,用0个放到原来位置的,有C(m-k,0)*(n-k ...

  3. C# 常用接口学习 IComparable 和 IComparer

    C# 常用接口学习 IComparable 和 IComparer 作者:乌龙哈里 时间:2015-11-01 平台:Window7 64bit,Visual Studio Community 201 ...

  4. 属性动画(Property Animation)

    属性动画系统是一个强大的可以绘制任意事物.你可以定义改变物体属性的动画,不管它是不是在屏幕上.属性动画随着时间的推移去改变物体的属性.如果要让某个事物动起来,你只需指定该事物的某个属性,如物体的坐标. ...

  5. tablespace

    CREATE [UNDO] TABLESPACE tablespace_name [DATAFILE datefile_spec1 [,datefile_spec2] ...... [{MININUM ...

  6. IP地址接口小结

    1 百度http://api.map.baidu.com/location/ip?ak=F454f8a5efe5e577997931cc01de3974&ip=58.67.143.169 {& ...

  7. 永洪BI配置测试及遇到的一些问题

    1.连oracle 11g数据库遇到密码不能验证通过. 在11g中, 数据库默认密码的大小写是敏感的,jdbc在给oracle密码时, 会将其变成大写.其他个别情况也会出现变成小写的. 为统一,去除o ...

  8. apache增加php版本

    把新的php版本解压到与旧的php版本相同目录 在新的php文件夹根目录复制一个 php.ini-development 重命名为 php.ini打开php.ini, 搜索 extension_dir ...

  9. java变量初始化

    java全局变量会自动初始化,但局部变量不会自动初始化.当我们新建一个对象的时候,java会申请一个区域存放类的数据,而成员变量就是类的数据,也是放在这个内存区域中,jvm申请内存时初始化.而方法中变 ...

  10. SSH综合练习-第1天

    SSH综合练习-仓库管理系统-第一天 综合练习的整体目的: 整合应用 Struts2 .Hibernate.Spring .Mysql . jQuery Ajax.java基础知识 熟悉企业SSH 基 ...