如何使用jQuery实现点击按钮弹出一个对话框?
1、打开Visual Studio 2015，如下图所示：
2、选择“文件”->“新建”->“网站”，如下图所示：
3、新建一个“ASP.NET空网站”，然后点击“确定”，如下图所示：
4、右键解决方案，选择“添加”->“Web窗体”，添加一个Default页面，如下图所示：
具体aspx页面代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<title>遮罩弹出窗口</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="delete.css" rel="stylesheet" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script src="delete.js"></script>
</head>
<body>
<div class="divShow">
<input type="checkbox" id="chexkBox1">
<a href="#">这是一条可以删除的记录</a>
<input id="button1" type="button" value="删除" class="btn">
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img alt="点击可以关闭" src="delete.gif
删除时提示
</div>
<div class="content">
<img alt="" src="delete.gif
<span>你真的要删除这条记录吗？</span>
</div>
<div class="bottom">
<input type="button" id="ok" value="确定" class="btn">
<input type="button" id="noOk" value="取消" class="btn">
</div>
</div>
</body>
</html>
5、右键解决方案，选择“添加”->“样式表”，添加一个delete样式，如下图所示：
具体样式代码如下：
@CHARSET "UTF-8";
* {
margin: 0px;
padding: 0px;
}
.divShow {
line-height: 32px;
height: 32px;
background-color: #eee;
width: 280px;
padding-left: 10px;
}
.dialog {
width: 360px;
border: 1px #666 solid;
position: absolute;
display: none;
z-index: 101;
}
.dialog .title {
background: #fbaf15;
padding: 10px;
color: #fff;
font-weight: bold;
}
.dialog .title img {
float: right;
}
.dialog .content {
background: #fff;
padding: 25px;
height: 60px;
}
.dialog .content img {
float: left;
}
.dialog .content span {
float: left;
padding: 10px;
}
.dialog .bottom {
text-align: right;
padding: 10 10 10 0;
background: #eee;
}
.mask {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 100;
}
.btn {
border: #666 1px solid;
width: 65px;
}
6、右键解决方案，选择“添加”->“JavaScript文件”，添加一个delete脚本文件，如下图所示：
具体代码如下：
7、拷贝一个delete.gif放到项目跟目录下，如下图所示：
8、然后编译项目，右键Default.aspx页面，选择在浏览器中查看，如下图所示：
9、运行以后，一个利用jquery实现点击delete删除按钮弹出一个对话框就完成，如下图所示：
