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

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

方法一
本方法是采用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)

相关推荐

  • asp.net 弹出对话框返回多个值

    asp.net 弹出对话框返回多个值

    说了这么多,可能不知道我在说什么.上图,你就知道了.呵呵. 图中,姓名有英文和中文之分.当用户单击对话框中的选择按钮时,就可以返回给父对话框了. 下面说代码了: 这里共包含3个页面 结构如下图:  其中Default.aspx的代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>弹出选择窗口</t

  • Asp.net 弹出对话框基类(输出alet警告框)

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.T

  • asp.net下模态对话框关闭之后继续执行服务器端代码的问题

    最近做一个从Access项目向 Asp.net + SqlServer迁移工作,其中遇到了这种情况,在Access窗体的一个按钮事件中,代码大体上是这么个功能:弹出模态对话框,在关闭对话框之后继续走一段数据库操作代码. 在Asp.net里弹出模态对话框容易,但是在模态对话框关闭之后还要继续执行服务器代码,这就要求当对话框关闭之后页面要立即提交.于是有了以下的解决方法. 在Web Form中拖入服务器端按钮,并假设此按钮ID为 btnComput,在隐藏页面的 Page_Load 中用代码中这样写

  • ASP.NET AJAX时用alert弹出对话框

    ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "click", "alert('删除成功"+queryId+"')", true);解决 asp.net onClientClick 与 验证控件冲突问题<script type="text/javascript"> function checkSubmit(){ Page_

  • .net 弹出消息框后导致页面样式变乱解决方法

    点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 复制代码 代码如下: Response.Write("<script language=javascript>"); Response.Write("window.alert('"); Response.Write("计划添加失败!"); Res

  • .NET中弹出对话框的方法汇总

    我们在.NET程序的开发过程中,常常需要和用户进行信息交互,比如执行某项操作是否成功,"确定"还是"取消",以及选择"确定"或"取消"后是否需要跳转到某个页面等 (1) 点击页面上的按钮,弹出一个对话框提示是"确定"还是"取消"操作,我们采用在按钮中添加属性来完成:     举例如下: 复制代码 代码如下: public System.Web.UI.WebControls.Button

  • asp.net GridView 删除时弹出确认对话框(包括内容提示)

    asp.net GridView 删除时弹出确认对话框(包括内容提示)

    效果图: html代码 复制代码 代码如下: <table align="center" bgcolor="#c0de98" border="0" cellpadding="0" cellspacing="1" width="99%"> <tr> <th colspan="2"> GridView演示</th> <

  • 基于.Net实现前端对话框和消息框

    基于.Net实现前端对话框和消息框

    关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局等等一些本可以使用插件的.好了,废话不多时.我们来实现自己的对话框和消息框. 对话框 要求:可拖动.点击按钮后可回调 画一个简单的模型框 <div class="hi-dialog-box clearfix"> <div class="hi-dialog-title">系统提示<

  • ASP.NET中弹出消息框的几种常见方法

    本文实例讲述了ASP.NET中弹出消息框的几种常见方法.分享给大家供大家参考.具体分析如下: 在ASP.NET网站开发中,经常需要使用到alert消息框,尤其是在提交网页的时候,往往需要在服务器端对数据进行检验,并给出提示或警告. 这里,仅介绍几种不同的实现方法. 1.众所周知的方法是采用如下代码来实现: 复制代码 代码如下: Response.Write("<script>alert('弹出的消息')</script>"); 不可否认,这种方法是最常用,也是最

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

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

    在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框方法一 本方法是采用ASP.NET AJAX的扩展控件:ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的: 第一步,我们先创建一个ASP.NET页面:ModalPopup.aspx 页面代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Aja

  • 详谈cxf和axis两种框架下的webservice客户端开发

    详谈cxf和axis两种框架下的webservice客户端开发

    目录 第一种:基于cxf的客户端开发 1.引入依赖 pom.xml 2.cxf和axis都没有spring配置 第二种:基于axis框架的客户端开发 一个客户端和服务端底层传输数据的了解 客户端相比服务端,基本没啥配置.引入jar包就好.我这里为了看效果,是新建了maven工程来做客户端.调用另一个webservice服务端maven工程. 环境:jdk1.7+maven3.3.9+tomcat7 框架:spring+cxf/spring+axis(这里不是axis2,是axis) 第一种:基于

  • Mysql两种情况下更新字段中部分数据的方法

    Mysql更新字段中部分数据第一种情况:  复制代码 代码如下: update tab set A = concat(substring(A,1,3),'bbb'); 从A的1个字符开始取3个字符,加上'bbb',再写入a中,如果A原始值为'123aaa',那么更新之后为'123bbb'了. 如果我们要将字段A值中的包含的1,替换成2呢? 例如:a=2211,现在要替换成2222,就是把1换成2 SQl语句这么写: 复制代码 代码如下: update table set a=REPLACE(a,

  • 详解IIS在ASP.NET Core下的两种部署模式

    详解IIS在ASP.NET Core下的两种部署模式

    目录 一.ASP.NET CORE Core Module 二. In-Process部署模式 三.Out-of-Process部署模式 四.<aspnetcore>配置 KestrelServer最大的优势体现在它的跨平台的能力,如果ASP.NET CORE应用只需要部署在Windows环境下,IIS也是不错的选择.ASP.NET CORE应用针对IIS具有两种部署模式,它们都依赖于一个IIS针对ASP.NET CORE Core的扩展模块.本文提供的示例演示已经同步到<ASP.NET

  • 详解ASP.NET MVC 下拉框的传值的两种方式

    详解ASP.NET MVC 下拉框的传值的两种方式

    以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: public ActionResult Index() { //1.1查询YzSeriesEntity的数据 List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList(); //1.2将YzS

  • ASP.Net中利用CSS实现多界面的两种方法

    本文实例讲述了ASP.Net中利用CSS实现多界面的两种方法.分享给大家供大家参考.具体实现方法如下: 可以通过使页面动态加载不同CSS来实现多界面的效果: 方法一: 复制代码 代码如下: <%@page language="C#"%> <%@import namespace="System.Data"%> <script language="c#" runat="server"> publ

  • C#下解析HTML的两种方法介绍

    C#下解析HTML的两种方法介绍

    在搜索引擎的开发中,我们需要对Html进行解析.本文介绍C#解析HTML的两种方法.AD: 在搜索引擎的开发中,我们需要对网页的Html内容进行检索,难免的就需要对Html进行解析.拆分每一个节点并且获取节点间的内容.此文介绍两种C#解析Html的方法. C#解析Html的第一种方法:用System.Net.WebClient下载Web Page存到本地文件或者String中,用正则表达式来分析.这个方法可以用在Web Crawler等需要分析很多Web Page的应用中.估计这也是大家最直接,

  • 两种Eclipse部署动态web项目方法

    两种Eclipse部署动态web项目方法

    和MyEclipse不一样,在Eclipse中做的Web项目默认是不支持将项目发布到Web服务器上的,会发布到工作空间的某个目录,因此无法在外部启动Tomcat来运行Web项目,只有打开Eclipse中的服务器,才能运行Web项目.所以要对Eclipse进行修改,才能将做好的项目,发布到Tomcat服务器上,发布到服务器上的Webapps文件夹下.本文介绍两种方法: 第一种方法: 1.通过修改Servers下Tomcat的配置: show view->servers下找到需要修改的tomcat-

  • EasyUI创建对话框的两种方式

    EasyUI创建对话框的两种方式

    对话框(Dialog)是一个特殊的窗口(window),可以包含在顶部的工具栏和在底部的按钮.默认情况下,对话框(Dialog)不能改变大小,但是用户可以设置 resizable 属性为 true,使其可以改变大小. 这种就是对话框了. EasyUI有两种创建方式: 第一种:通过已存在的DOM节点元素标签创建 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

随机推荐