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. 用纯css改变select的下拉菜单

    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...

  2. php curl拉取远程图片

    <?php $url = "图片绝对地址/thumbnail.jpg"; $filename = 'curl.jpg'; getImg($url, $filename); / ...

  3. Design Pattern——Factory_DP

    namespace TEST { //用于生成一个对应的操作类,这个工厂只是用来产生操作类的,不做其他只用 public class Factory { public Operate GetOpetr ...

  4. UML类图几种关系总结

    在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...

  5. python之~利用PIL模块在图片上写写画画

    借鉴了教程: http://yxnt.github.io/2016/05/15/Pillow-Python3.5/ 完成作业如下: 后来学着写给自己的图片加了水印. from PIL import I ...

  6. gitlab自动备份

    1.周期性计划任务: $crontab -e 0 0 * * * /opt/gitlab/bin/gitlab-rake gitlab:backup:create $service crond res ...

  7. Linux服务器操作系统

    Linux服务器操作系统 今日大纲 ●    服务器操作系统的系列.Linux的主流产品.虚拟机软件 ●    安装linux ●    linux基本命令 ●    用户管理及权限(多用户) ●   ...

  8. iOS开发中怎么样使用激光推送

    1.注册激光推送的账号 ----> 创建应用 2.上传推送测试和发布的p12文件  注意密码的填写 3.下载sdk并拖进工程里 4.在build setting 搜索search   把路径改一 ...

  9. 针对IE的CSS样式hack

    针对IE的CSS样式hack,如下: 例子:background:#000: 1.只针对IE6的hack方式(_):_background:#000: 2.只针对IE7的hack方式(+):+back ...

  10. hdu_5788_Level Up(树状数组+主席树)

    题目链接:hdu_5788_Level Up 题意: 有一棵树,n个节点,每个节点有个能力值A[i],mid[i],mid的值为第i节点的子树的中位数(包括本身),现在让你将其中的一个节点的A值改为1 ...