jQuery 实现弹框功能。

实现思路：

需要3层Div，默认情况下只显示底层div，点击弹框按钮时中层和上层div显示，关闭弹框时，中层和上层div隐藏

1、底层div显示弹框按钮

2、中间层div为半透明状，防止弹框后底层div元素被点击

3、上层div放置弹框内容，可以自定义

html代码：

<html>
 <head>
  <title> dialog test</title> 
 </head>
 <link href="../css/dialog.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resouse/jquery.js"></script>
  <script type="text/javascript" src="../js/dialog.js"></script>
 <body>
	 <input id="dialogBut" class="btn" style="background:url(../images/button_img.png)" type="button" value="弹 框">
	 <div id="secondDiv"></div>
	  <div id="dialogContent" class="fontStyle">
		<div id="title">
			title
		</div>
		<form>
			姓名:<input type="text"><br/>
			邮件:<input type="text"><br/>
			电话:<input type="text"><br/>
			 <input type="button" class="btn" style="margin-left:30px;background:url(../images/button_img.png)" value="确 定">
			 <input type="button" id="cancel" class="btn" style="background:url(../images/button_img.png)" value="取 消">
		</form>
	  </div>
 </body>
</html>

css样式（

dialog.css）： 

.fontStyle {
	font-size: 13px;
	font-style: normal;
}

.btn{
	width: 60px;
	height: 26px;	
	font-weight: 700;
	font-size: 12px;
	color: #FFFFFF;
}
#secondDiv{
	display:none;
	position: absolute;	
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background-color: #DCDCDC;
}

#dialogContent {	
	display:none;
	background-color: #FFFFFF;
	position:absolute;
	top:200px;
	left:40%;
	border:solid 1px #DCDCDC;
}

#title {
	height:25px;
	background-color: #444953;
	color:#FFFFFF;
}

#dialogContent input {
	margin:10px 5px;
}
form {
	margin:10px 5px;
}

dialog.js: 

$().ready(function(){
	$("#dialogBut").click(function(){
	   $("#secondDiv").show();
	   $("#dialogContent").show();
	});
	$("#cancel").click(function(){
	   $("#secondDiv").hide();
	   $("#dialogContent").hide();
	});
});

ok,搞定。查看展示图：

jquery 出现弹框alert jquery实现弹框_css