[原创推荐] 介绍两种WEB下的模态对话框的实现
2009-06-03 19:39
369 查看
两种WEB下的模态对话框
作者:Jacky.zhou
时间:2009/06/03
概述
在如今互联网网站上,AJAX效果风靡一时,应该说AJAX技术在未来几年不会动摇,在AJAX效果中,模态对话框是比较常见的效果,也是非常适用的。在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框:
效果
4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head runat="server">
8 <title></title>
9</head>
31<body>
32 <form id="form1" runat="server">
33 <div>
34 <asp:ScriptManager ID="ScriptManager1" runat="server">
35 </asp:ScriptManager>
36 <asp:LinkButton ID="lbtn_Login" runat="server">登陆</asp:LinkButton>
37 <asp:Panel ID="p_Login" CssClass="p_Login" runat="server" Style="display: none;">
39 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
40 <ContentTemplate>
41 <p>
42 用户名:<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
43 </p>
44 <p>
45 密码:<asp:TextBox ID="Password" runat="server" CssClass="Password" TextMode="Password"></asp:TextBox>
46 </p>
47 <p>
48 <asp:Button ID="Btn_Submit" runat="server" Text="登录" OnClick="Btn_Submit_Click" />
49 <asp:Button ID="Btn_Cancel" runat="server" Text="取消" OnClick="Btn_Cancel_Click" />
50 </p>
51 <p>
52 <asp:Label ID="lbResult" runat="server" Text=""></asp:Label>
53 <p>
54 </ContentTemplate>
55 </asp:UpdatePanel>
56 </asp:Panel>
57 <cc1:ModalPopupExtender ID="ModalPopupExtender1"
58 PopupControlID="p_Login"
59 TargetControlID="lbtn_Login"
60 BackgroundCssClass="ModalPopupBackground"
61 runat="server">
62 </cc1:ModalPopupExtender>
63 </div>
64 </form>
65</body>
66</html>
67
后台代码:
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Web.UI;
6using System.Web.UI.WebControls;
7
8public partial class _Default : System.Web.UI.Page
9
就这样,通过很简单的扩展控件就实现了模态对话框的效果,但是,我后来想了想,我感觉用纯JS来实现更简单些,所以,我用纯JS来实现了一次,很快成功了!
方法二
我们这次创建一个HTML页面:Popup.html
代码如下:
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4 <title></title>
45</head>
46<body>
47 <a href="javascript:void(0);" onclick="showModalPopup();">登录</a>
48 <div id="loginContent">
49 <a href="javascript:void(0);" onclick="hideModalPopup();">关闭</a>
50 </div>
51 <div id="hideContent">
52 </div>
53</body>
54</html>
55
就这样,我用两种方式实现了前面展示的那样的效果,其实我自己感觉,用纯JS写效果比用控件写更好,自己更明确整个效果代码的流程。
作者:Jacky.zhou
时间:2009/06/03
概述
在如今互联网网站上,AJAX效果风靡一时,应该说AJAX技术在未来几年不会动摇,在AJAX效果中,模态对话框是比较常见的效果,也是非常适用的。在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框:
效果
4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head runat="server">
8 <title></title>
9</head>
31<body>
32 <form id="form1" runat="server">
33 <div>
34 <asp:ScriptManager ID="ScriptManager1" runat="server">
35 </asp:ScriptManager>
36 <asp:LinkButton ID="lbtn_Login" runat="server">登陆</asp:LinkButton>
37 <asp:Panel ID="p_Login" CssClass="p_Login" runat="server" Style="display: none;">
39 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
40 <ContentTemplate>
41 <p>
42 用户名:<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
43 </p>
44 <p>
45 密码:<asp:TextBox ID="Password" runat="server" CssClass="Password" TextMode="Password"></asp:TextBox>
46 </p>
47 <p>
48 <asp:Button ID="Btn_Submit" runat="server" Text="登录" OnClick="Btn_Submit_Click" />
49 <asp:Button ID="Btn_Cancel" runat="server" Text="取消" OnClick="Btn_Cancel_Click" />
50 </p>
51 <p>
52 <asp:Label ID="lbResult" runat="server" Text=""></asp:Label>
53 <p>
54 </ContentTemplate>
55 </asp:UpdatePanel>
56 </asp:Panel>
57 <cc1:ModalPopupExtender ID="ModalPopupExtender1"
58 PopupControlID="p_Login"
59 TargetControlID="lbtn_Login"
60 BackgroundCssClass="ModalPopupBackground"
61 runat="server">
62 </cc1:ModalPopupExtender>
63 </div>
64 </form>
65</body>
66</html>
67
后台代码:
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Web.UI;
6using System.Web.UI.WebControls;
7
8public partial class _Default : System.Web.UI.Page
9
就这样,通过很简单的扩展控件就实现了模态对话框的效果,但是,我后来想了想,我感觉用纯JS来实现更简单些,所以,我用纯JS来实现了一次,很快成功了!
方法二
我们这次创建一个HTML页面:Popup.html
代码如下:
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4 <title></title>
45</head>
46<body>
47 <a href="javascript:void(0);" onclick="showModalPopup();">登录</a>
48 <div id="loginContent">
49 <a href="javascript:void(0);" onclick="hideModalPopup();">关闭</a>
50 </div>
51 <div id="hideContent">
52 </div>
53</body>
54</html>
55
就这样,我用两种方式实现了前面展示的那样的效果,其实我自己感觉,用纯JS写效果比用控件写更好,自己更明确整个效果代码的流程。
相关文章推荐
- 安装php扩展pthreads实现PHP多线程 原创qw871122015-04-16 17:01评论(0)948人阅读 下面介绍两种编译方式: 1、在已有的PHP上编译pthreads扩展 注:需
- 【华磊原创】原创分享-在Asp.net下实现变长连接的web即时应用的实现范例及ReverseAjax的演示介绍
- Server 2012之利用NLB实现WEB站点的的高可用 推荐
- WEB页面同时实现两种打印(下载Excel,页面直接打印)
- MapxTreme2004 ASP.NET在WEB下实现地图上修改某点的地理位置-原创
- heartbeat v1+NFS实现web高可用集群(一) 推荐
- 基于lvs的DR模型搭建高可用的web服务,并部署wordpress,(附有脚本实现健康状态检测的代码) 推荐
- ApplicationContext的三种实现方式以及在web.xml配置的两种方式
- 给自定义控件(Web Control)添加事件的几种方法。前两种方法可以不实现IPostBackEventHandler
- [原创]java WEB学习笔记83:Hibernate学习之路---双向 1-n介绍,关键点解释,代码实现,set属性介绍(inverse,cascade ,order-by )
- [原创]egret的WebView实现(基于egret2.5)
- 实现web打印的各种方法介绍及实现代码
- Windows Server 2008 web服务实现网络负载平衡实例 推荐
- 两种利用GCD实现分步获取结果的方式和SDWebImage缓存机制的验证
- 协同过滤介绍和简单推荐系统的实现
- 通过对web日志的挖掘来实现内容推荐系统
- 用JAVA实现汉字转拼音缩写(两种方式介绍)
- 【JavaWeb-24】AOP介绍和术语、手动/半自动/自动实现AOP、基于XML和注解的AspectJ使用、JdbcTemplate的使用
- MariaDB数据库主从复制、双主复制、半同步复制、基于SSL的安全复制实现及其功能特性介绍 推荐
- C#实现Web文件上传的两种方法