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. linux 命令展示该目录下的所有子目录及文件结构 tree

    1. apt-get install tree 2. tree -d -L 1 解释: tree :显示目录树: -d : 只显示目录: -L 1 : 选择显示的目录深度为1 , 只显示一层深度. 目 ...

  2. Java实现二叉树先序，中序，后序遍历

    以下是我要解析的一个二叉树的模型形状 接下来废话不多直接上代码 一种是用递归的方法,另一种是用堆栈的方法: 首先创建一棵树: public class Node { private int data; ...

  3. HTML，JS禁止鼠标右键、禁止全选、复制、粘贴的方法

    禁止鼠标右键.禁止全选.复制.粘贴: oncontextmenu事件禁用右键菜单: js代码: document.oncontextmenu = function(){ event.returnVal ...

  4. poi做Excel数据驱动,支持.xls和.xlsx格式的excel文档，比起jxl强大不少

    import java.io.FileInputStream;import java.io.InputStream;import java.util.Iterator;import java.util ...

  5. neutron openvswitch agent实现安全组的方法

    关于openstack安全组,采用一问一答的形式记录如下 1. 是加载在计算节点的还是网络节点的? 是加载在计算节点的 2. 是使用iptable规则实现的吗? M版的neutron实现了openvs ...

  6. AIDL机制实现进程间的通讯实例

    转载自:http://blog.csdn.net/cjjky/article/details/7562652 ======================================= 在Andr ...

  7. Hibernate3 第一天

    Hibernate3 第一天 课程安排:4天(框架的使用+理论知识) 第一天Hibernate快速入门(单表的CRUD)+核心api讲解(配置+接口) 第二天:Hibernate一级缓存,快照,对象持 ...

  8. uva 12356 Army Buddies

    简单的并查集应用. #include<stdio.h> #include<string.h> #include<math.h> #include<algori ...

  9. LINQ 查询集合总的重复项

                      select new FMDS_FarmPlotNewInfo                   {                        FarmPlo ...

  10. Redis高可用配置（Keepalived）

    主:172.16.0.104 备:172.16.0.105 VIP:172.16.0.107 客户端直接连VIP,当master 104的redis挂掉后,105作为master.当104重启后,10 ...