繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 两种WEB下的模态对话框 （asp.net或js的分别实现）
- Javascript
- 一个特殊的排序需求的javascript实现代码
- javaScript 简单验证代码（用户名，密码，邮箱)
- 支持ie与FireFox的剪切板操作代码
- 使用JS判断是否数字和小数点组合的数字的两中方法比较(isNaN和逐判断)
- javascript 表单验证常见正则
- IE FF OPERA都可用的弹出层实现代码
- PPK 谈 JavaScript 的 this 关键字 [翻译]
- JavaScript 自动在表格前面增加序号
- 点击按钮后 文本框变为Select下拉列表框
- js类的静态属性和实例属性的理解
- 点击文章内容处弹出页面代码
- 点击下载链接 弹出页面实现代码
- 签名框（Textarea）限制文字数量并适时提示
- JavaScript CSS 通用循环滚动条
- js removeChild 障眼法 可能出现的错误
- 面向对象的javascript（笔记）
- JavaScript 浮点数运算 精度问题
- JavaScript 接收键盘指令示例
- CSS 美化表格边框为凹陷立体效果的实现方法
- JavaScript 控制文本框的值连续加减
Javascript 中的 两种WEB下的模态对话框 （asp.net或js的分别实现）
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 217 ::
收藏到网摘: n/a
在如今互联网网站上，AJAX效果风靡一时，应该说AJAX技术在未来几年不会动摇，在AJAX效果中，模态对话框是比较常见的效果，也是非常适用的。 在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框
方法一
本方法是采用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写效果比用控件写更好，自己更明确整个效果代码的流程。
评论 (0) All
