软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 两种WEB下的模态对话框

两种WEB下的模态对话框

 

  概述

  在如今互联网网站上,AJAX效果风靡一时,应该说AJAX技术在未来几年不会动摇,在AJAX效果中,模态对话框是比较常见的效果,也是非常适用的。在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框:

  效果

  方法一

  本方法是采用ASP.NET AJAX的扩展控件:ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的:

  第一步,我们先创建一个ASP.NET页面:ModalPopup.aspx

  页面代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxControlToolkit.aspx.cs"
2 Inherits="_Default" %>
3
4<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
5<!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 <style type="text/css">
10 .p_Login
11 {}{
12 width: 230px;
13 height: 180px;
14 padding: 15px 15px 15px 15px;
15 background-color: #fff;
16 border: 2px solid #ccc;
17 }
18 .Password
19 {}{
20 margin-left: 15px;
21 }
22 .ModalPopupBackground
23 {}{
24 background-color:#dddddd;
25 filter:alpha(opacity=60); /**//*IE*/
26 opacity:60; /**//*Firefox*/
27 }
28
29 </style>
30</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 <%--panel的display的CSS属性必须写在标签里面。--%>
38 <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>

后台代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
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{
10 protected void Page_Load(object sender, EventArgs e)
11 {
12
13 }
14 protected void Btn_Submit_Click(object sender, EventArgs e)
15 {
16 if (this.UserName.Text.Trim().ToUpper() == "JACKY" && this.Password.Text.Trim() == "123")
17 {
18 this.lbResult.Text = "登陆成功!";
19 }
20 else
21 {
22 this.lbResult.Text = "登录失败!";
23 }
24 }
25
26 protected void Btn_Cancel_Click(object sender, EventArgs e)
27 {
28 this.ModalPopupExtender1.Hide();
29 this.UserName.Text = "";
30 this.Password.Text = "";
31 this.lbResult.Text = "";
32 }
33}

相关阅读
栏目导航
推荐软件