宝哥软件园

两个网站下的模态对话框(分别实现ASP.NET或js)

编辑:宝哥软件园 来源:互联网 时间:2021-10-25

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

方法一本方法是采用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就这样,我用两种方式实现了前面展示的那样的效果,其实我自己感觉,用纯射流研究…写效果比用控件写更好,自己更明确整个效果代码的流程。

更多资讯
游戏推荐
更多+