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. openwrt的编译环境

    安装centos7 ,以最小的方式安装在 vmware 的虚拟机了.(yum 更新系统就不提了.下面是没有yum更新的情况下的记录和总结) 安装后,发现 ifconfig 命令不好用,得用 ip ad ...

  2. javascript静态页面传值的三种方法分享

    一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 复制代码 代码如下: <input type="text" ...

  3. NS_ASSUME_NONNULL_BEGIN 延伸

    NS_ASSUME_NONNULL_BEGIN和NS_ASSUME_NONNULL_END 在.h文件中,可以看到这两个宏,翻看定义,这两个宏的代码是 #define NS_ASSUME_NONNUL ...

  4. CachedRowSet的用法

    String sql="select item_code from xt_dictionary_item where type_id='32' and parent_itemid='0' o ...

  5. oracle导入dmp数据库文件

    要用sys账户登录数据库,创建和dmp文件一样的表空间名称 1. 创建表空间 例如: create tablespace test(表空间名称) datafile 'F:\oracle\oradata ...

  6. hdu1013

    #include<stdio.h> #include<string.h> int main() { char num[1000]; int len,sum,i; while(s ...

  7. Journey

    Journey 题目链接:http://codeforces.com/problemset/problem/721/C dp/记忆化搜索/拓扑排序 刚开始想到用bfs+dp,fst(然而中间有一步逻辑 ...

  8. POJ 3264 RMQ裸题

    POJ 3264 题意:n个数,问a[i]与a[j]间最大值与最小值之差. 总结:看了博客,记下了模板,但有些地方还是不太理解. #include<iostream> #include&l ...

  9. js--事件对象的理解4

    阻止默认行为:1.实例-简易修改右键菜单<script>document.oncontextmenu=function (ev){ var oEvent=ev||event; var oU ...

  10. jQuery第六章

    jQuery与Ajax应用 一.Ajax的优势和不足 1.Ajax的优势: (1)不需要插件支持:不需要任何浏览器插件就可以被绝大多数浏览器支持 (2)优秀的用户体验:能在不刷新整个页面的前提下更新数 ...