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,搞定。查看展示图：
