脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 模态 对话框

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

 更新时间：2009年12月02日 01:02:09   作者：  
在如今互联网网站上，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;">
&nbsp;<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写效果比用控件写更好，自己更明确整个效果代码的流程。
您可能感兴趣的文章:

相关文章

  • 关于自定义Egg.js的请求级别日志详解

    关于自定义Egg.js的请求级别日志详解

    这篇文章主要给大家介绍了关于自定义Egg.js的请求级别日志的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • Echarts基本用法_动力节点Java学院整理

    Echarts基本用法_动力节点Java学院整理

    这篇文章主要介绍了Echarts基本用法，详解的介绍了Echarts的基本用法和实例，有兴趣的可以了解一下
    2017-08-08
  • JS 控件事件小结

    JS 控件事件小结

    事件对于控件来说至关重要，控件的消息通信机制使用事件的成本最低，但是对于JS控件来说有一些麻烦需要解决，JS类本身不支持事件，DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的
    2012-10-10
  • 微信小程序封装自定义弹窗的实现代码

    微信小程序封装自定义弹窗的实现代码

    这篇文章主要介绍了微信小程序封装自定义弹窗的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 前端处理二进制流文件导出为excel表代码示例

    前端处理二进制流文件导出为excel表代码示例

    这篇文章主要给大家介绍了关于前端处理二进制流文件导出为excel表的相关资料,后台管理系统,常会出现导出excel表格功能,需要的朋友可以参考下
    2023-08-08
  • JavaScript常用进制转换及位运算实例解析

    JavaScript常用进制转换及位运算实例解析

    这篇文章主要介绍了JavaScript常用进制转换及位运算实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • setTimeout的延时为0时多个浏览器的区别

    setTimeout的延时为0时多个浏览器的区别

    一直比较迷惑：js的setTimeout到底会在什么时候执行，如果执行了，和主执行脚本到底差多长时间
    2012-05-05
  • javascript操作向表格中动态加载数据

    javascript操作向表格中动态加载数据

    这篇文章主要为大家详细介绍了javascript操作向表格中动态加载数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Javascript生成全局唯一标识符（GUID,UUID）的方法

    Javascript生成全局唯一标识符（GUID,UUID）的方法

    本文给大家汇总介绍了5种使用javascript实现全局唯一标识符（GUID,UUID）的方法，非常的全面，有需要的小伙伴可以来参考下
    2016-02-02
  • 原生js实现自定义滚动条

    原生js实现自定义滚动条

    这篇文章主要为大家详细介绍了原生js实现自定义滚动条，可点击、拖动到达，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论