[原创推荐] 介绍两种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

 

后台代码：

 

 1 using  System;
 2 using  System.Collections.Generic;
 3 using  System.Linq;
 4 using  System.Web;
 5 using  System.Web.UI;
 6 using  System.Web.UI.WebControls;
 7
 8 public   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写效果比用控件写更好，自己更明确整个效果代码的流程。

 

转载于:https://www.cnblogs.com/jackyzhou/archive/2009/06/03/1495630.html