两种WEB下的模态对话框 (asp.net或js的分别实现)
2009-12-02 00:00
791 查看
在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框
方法一
本方法是采用ASP.NET AJAX的扩展控件:ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的:
第一步,我们先创建一个ASP.NET页面:ModalPopup.aspx
页面代码:
就这样,通过很简单的扩展控件就实现了模态对话框的效果,但是,我后来想了想,我感觉用纯JS来实现更简单些,所以,我用纯JS来实现了一次,很快成功了!
方法二
我们这次创建一个HTML页面:Popup.html
代码如下:
就这样,我用两种方式实现了前面展示的那样的效果,其实我自己感觉,用纯JS写效果比用控件写更好,自己更明确整个效果代码的流程。
方法一
本方法是采用ASP.NET AJAX的扩展控件:ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的:
第一步,我们先创建一个ASP.NET页面:ModalPopup.aspx
页面代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxControlToolkit.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .p_Login {}{ width: 230px; height: 180px; padding: 15px 15px 15px 15px; background-color: #fff; border: 2px solid #ccc; } .Password {}{ margin-left: 15px; } .ModalPopupBackground {}{ background-color:#dddddd; filter:alpha(opacity=60); /**//*IE*/ opacity:60; /**//*Firefox*/ } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:LinkButton ID="lbtn_Login" runat="server">登陆</asp:LinkButton> <%--panel的display的CSS属性必须写在标签里面。--%> <asp:Panel ID="p_Login" CssClass="p_Login" runat="server" Style="display: none;"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <p> 用户名:<asp:TextBox ID="UserName" runat="server"></asp:TextBox> </p> <p> 密码:<asp:TextBox ID="Password" runat="server" CssClass="Password" TextMode="Password"></asp:TextBox> </p> <p> <asp:Button ID="Btn_Submit" runat="server" Text="登录" OnClick="Btn_Submit_Click" /> <asp:Button ID="Btn_Cancel" runat="server" Text="取消" OnClick="Btn_Cancel_Click" /> </p> <p> <asp:Label ID="lbResult" runat="server" Text=""></asp:Label> <p> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <cc1:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="p_Login" TargetControlID="lbtn_Login" BackgroundCssClass="ModalPopupBackground" runat="server"> </cc1:ModalPopupExtender> </div> </form> </body> </html> [code] 后台代码: [code] using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Btn_Submit_Click(object sender, EventArgs e) { if (this.UserName.Text.Trim().ToUpper() == "JACKY" && this.Password.Text.Trim() == "123") { this.lbResult.Text = "登陆成功!"; } else { this.lbResult.Text = "登录失败!"; } } protected void Btn_Cancel_Click(object sender, EventArgs e) { this.ModalPopupExtender1.Hide(); this.UserName.Text = ""; this.Password.Text = ""; this.lbResult.Text = ""; } }
就这样,通过很简单的扩展控件就实现了模态对话框的效果,但是,我后来想了想,我感觉用纯JS来实现更简单些,所以,我用纯JS来实现了一次,很快成功了!
方法二
我们这次创建一个HTML页面:Popup.html
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #loginContent {}{ position: absolute; left: 40%; top: 30%; width: 230px; height: 180px; padding: 15px 15px 15px 15px; background-color: #fff; border: 2px solid #ccc; background-color: #fff; z-index: 100; display:none; } #hideContent {}{ display:none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 50; background-color: #dddddd; filter: alpha(opacity=60); /**//*IE*/ opacity:60; /**//*Firefox*/ } </style> <script type="text/javascript"> var hidecontent = document.getElementById("hideContent"); var logincontent = document.getElementById("loginContent"); function showModalPopup() { hideContent.style.display = "block"; loginContent.style.display = "block"; } function hideModalPopup() { hideContent.style.display = "none"; loginContent.style.display = "none"; } </script> <title></title> </head> <body> <a href="javascript:void(0);" onclick="showModalPopup();">登录</a> <div id="loginContent"> <a href="javascript:void(0);" onclick="hideModalPopup();">关闭</a> </div> <div id="hideContent"> </div> </body> </html>
就这样,我用两种方式实现了前面展示的那样的效果,其实我自己感觉,用纯JS写效果比用控件写更好,自己更明确整个效果代码的流程。
相关文章推荐
- 两种WEB下的模态对话框 (asp.net或js的分别实现)
- memcache实战之四:接口编程(分别用asp.net自带的System.Web.Caching,以及分布式缓存MemcachedProviders)来实现缓存接口
- asp.net 中实现录入时提示 (web service + js 实现 )
- AngularJS+ASP.NET MVC+SignalR实现消息推送
- ASP.NET 实践:使用用户控件实现 Web 部件的个性化
- ASP.NET中实现Web打印的方案
- asp.net web定时器实现及注意事项
- 在ASP.Net中两种利用CSS实现多界面的方法. (转)
- asp.net 基于ajaxfileupload.js 实现文件异步上传
- asp.net 通过js实现批量删除和全选
- asp.net+ajaxfileupload.js 实现文件异步上传代码分享
- asp.net GridView的删除对话框的两种方法
- 大家来看ASP.net中两种方法实现简单的购物车
- 重温.NET下Assembly的加载过程 ASP.NET Core Web API下事件驱动型架构的实现(三):基于RabbitMQ的事件总线
- asp.net后台动态添加JS文件和css文件的引用实现方法
- asp.net js实现dropdownlist二级联动(动态)
- 文件夹选择对话框 JS实现的两种方案
- ASP.NET WebApi OWIN 实现 OAuth 2.0(自定义获取 Token)
- 在ASP.Net中两种利用CSS实现多界面的方法