在这里我想给大家介绍或者展示一下我自己的两个模态对话框。

方法一本方法是采用ASP.NET AJAX的扩展控件：ASP .专题控件工具包中的模态对话框控件实现的：第一步，我们先创建一个ASP .网页面：ModalPopup.aspx页面代码：复制代码代码如下： %@页面语言=' c# ' AutoEventWireup=' true ' CodeFile=' AJaxcontroltoolkit。aspx。cs ' Inherits=' _ Default ' % % @ Register Assembly=' AJaxcontroltoolkit ' Namespace=' AJaxcontroltoolkit '标记前缀=' cc1 ' %！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title style type=' text/CSS ' .p _ Login { } { width: 230px高度： 180像素；padding: 15px 15px 15px 15px背景-color : # fff；border: 2px固体# ccc}。密码{ } {左边距： 15px} .modalopupbackground { } {底色： # ddddddfilter:alpha(不透明度=60);/* *//* IE */opa city 336060；/* *//* Firefox */}/风格/头身表单ID=' form 1 ' runat=' server ' div ASP 3360脚本管理器ID=' script manager 1 ' runat=' server '/ASP 3360脚本管理器asp:链接按钮ID=' lbtn _ log in ' runat=' server '登陆/asp3360链接按钮%-面板的显示的半铸钢钢性铸铁(铸造半钢)属性必须写在标签里面。

-% ASP :面板ID=' p _ log in ' CSS类=' p _ log in ' runat=' server ' Style=' display : none；'ASP : updatepanel ID=' updatepanel 1 ' runat=' server '内容模板p用户名：asp:文本框ID=' UserName ' runat=' server '/asp:文本框/p p密码：asp3360文本框ID=' Password ' runat=' server ' CSS类=' Password ' TextMode=' Password '/ASP 3360文本框/p p asp3360按钮ID=' Btn _ Submit ' runat=' server ' Text='登录OnClick=' Btn _ Submit _ Click '/ASP :按钮标识=' Btn _ Cancel ' runat='服务器' Text='取消OnClick=' Btn _ Cancel _ Click '/p ASP 3360标签ID=' lbResult ' runat=' server ' Text=' '/ASP :标签p/内容模板/ASP : updatepanel/ASP : panel cc 1: modaloupextender ID=' modaloupextender 1 ' popupcontrol solid=' p _ log in ' TargetControlID=' lbtn _ log in ' background csclass=' modaloupbackground ' runat='后台代码：[代码]使用系统； 使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统网络。用户界面使用系统。网络控件；公共部分类_默认：系统网络。ui。页面{受保护的无效页面_加载(对象发送方，事件参数e)} {受保护的void Btn _ Submit _ Click(对象发送方，EventArgs e) { if (this .用户名。文本。修剪()。ToUpper()=='JACKY '这个。密码。文字。trim()==' 123 '){这个。lbresult。文本='登陆成功！} else { this.lbResult.Text='登录失败！} }受保护的作废Btn _取消_点击(对象发送者，EventArgs e) { this .modalopupextender 1。hide()；这个。用户名。文本=' ';这个。密码。文本=' ';这个。lbresult。text=} } 就这样，通过很简单的扩展控件就实现了模态对话框的效果，但是，我后来想了想，我感觉用纯射流研究…来实现更简单些，所以，我用纯射流研究…来实现了一次，很快成功了！方法二我们这次创建一个超文本标记语言页面：Popup.html代码如下：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML L1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head style type=' text/CSS ' # loginContent { } { position : absolute；左： 40%;前：名30%；宽度： 230 px高度： 180像素；padding: 15px 15px 15px 15px背景-color : # fff；border: 2px固体# ccc背景-color : # fff；z指数： 100；display : none } # HideContent { } { display : none；绝对位置：top : 0；左： 0；高度： 100%;宽度： 100%;z指数： 50;背景-color : # dddd DD；filter: alpha(不透明度=60);/* *//* IE */opa city 336060；/* *//* Firefox */}/样式脚本类型=' text/JavaScript ' var hide content=document。getelementbyid('隐藏内容')；var登录内容=文档。getelementbyid('登录内容')；函数showmodaloupp(){ HideContent。风格。display=' block登录内容。风格。display=' block}函数hidemodaloupp(){ hide content。风格。显示='无'；登录内容。风格。显示='无'；}/脚本标题/title/head body a href=' JavaScript : void(0)；onclick=' showmodaloupp()；'登录/a div id=' logIncontent ' a href=' JAVAScript : void(0)；onclick=' hidemodaloupp()；'关闭/a/div div id=' HideContent '/div/body/html就这样，我用两种方式实现了前面展示的那样的效果，其实我自己感觉，用纯射流研究…写效果比用控件写更好，自己更明确整个效果代码的流程。