[原创推荐] 介绍两种WEB下的模态对话框的实现

两种WEB下的模态对话框

 

 作者：Jacky.zhou

时间：2009/06/03

 

概述

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

 

效果

 

方法一

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

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

页面代码：

 

 

复制代码
 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            &nbsp;<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{
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}
34
复制代码

 

      就这样，通过很简单的扩展控件就实现了模态对话框的效果，但是，我后来想了想，我感觉用纯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    <style type="text/css">
 5        #loginContent
 6        {
 7            position: absolute;
 8            left: 40%;
 9            top: 30%;
10            width: 230px;
11            height: 180px;
12            padding: 15px 15px 15px 15px;
13            background-color: #fff;
14            border: 2px solid #ccc;
15            background-color: #fff;
16            z-index: 100;
17            display:none;
18        }
19        #hideContent
20        {
21            display:none;
22            position: absolute;
23            top: 0;
24            left: 0;
25            height: 100%;
26            width: 100%;
27            z-index: 50;
28            background-color: #dddddd;
29            filter: alpha(opacity=60)； /*IE*/ opacity:60; /*Firefox*/
30        }
31    </style>
32    <script type="text/javascript">
33        var hidecontent = document.getElementById("hideContent");
34        var logincontent = document.getElementById("loginContent");
35        function showModalPopup() {
36            hideContent.style.display = "block";
37            loginContent.style.display = "block";
38        }
39        function hideModalPopup() {
40            hideContent.style.display = "none";
41            loginContent.style.display = "none";
42        }
43    </script>
44    <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写效果比用控件写更好，自己更明确整个效果代码的流程。

 

posted @   J.z  阅读(3824)  评论(24)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示