两种WEB下的模态对话框 （asp.net或js的分别实现）_javascript技巧

在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框

方法一
本方法是采用ASP.NET AJAX的扩展控件：ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的：
第一步，我们先创建一个ASP.NET页面:ModalPopup.aspx
页面代码：

复制代码 代码如下:

Inherits="_Default" %>

登陆


 

用户名：

密码：

PopupControlID="p_Login"
TargetControlID="lbtn_Login"
BackgroundCssClass="ModalPopupBackground"
runat="server">

[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
代码如下：

复制代码 代码如下:

#loginContent
{}{
位置：绝对；
左：40%；
顶部：30%；
宽度：230px；
高度：180px；
内边距：15px 15px 15px 15px；
背景颜色：#fff；
边框：2px实线#ccc；
背景颜色：#fff；
z 索引：100；
显示：无；
}
#hideContent
{}{
显示：无；
位置：绝对；
顶部：0；
左：0；
高度：100%；
宽度：100%；
z 索引：50；
背景颜色：#dddddd；
滤镜：alpha(opacity=60)； /**//*IE*/ opacity:60; /**//*火狐浏览器*/
}


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";
}
脚本>
标题>
头>

登录

关闭;

身体>

就这样，我用两种方式实现了前面展示的那样的效果，其实我自己感觉，用纯JS写效果比用控件写更好，自己更明确整个效果代码的流程。