此代码实现弹窗,点击空白处可以关闭弹窗。 <!DOCTYPE html> <html> <head> <title>点击空白处可关闭的窗口</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" /> <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" /> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> rel="stylesheet" href="css/dialog.css" type="text/css" /> <style type="text/css">body{cursor:pointer;}</style> <script type="text/javascript">$(function(){ jQuery.fn.extend({ center: function (width, height) { return $(this).css("left", ($(window).width() - width) / 2 + $(window).scrollLeft()). css("top", ($(window).height() - height) / 2 + $(window).scrollTop()). css("width", width). css("height", height); } }); $("#box").click(function(event){ var e=window.event || event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } showDialog(); }); $(document).bind("click",function(){ closeDiv(); }); }); function showDialog(event){ var e=window.event || event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } $("#maskLayer").css("display", "block"); $("#dialog").show().center(300, 220);//展现登陆框 } function closeDiv() { $("#maskLayer").css("display", "none"); $("#dialog").hide(); }</script> </head> <body> <div id="box">弹出窗1</div> <br /><br /><br /> <div><a target=_blank οnclick="showDialog(event);">弹出窗2</a></div> <div id="dialog" οnclick="showDialog(event);"> <form id="dialogForm" style="margin-top: 4em; "> <div> <div class="btn-dialog btn-left"> <a target=_blank id="deviceInfo" href="table.html" rel="nofollow"><span>A按钮<br />信息</span></a> </div> <div class="btn-dialog btn-right"> <a target=_blank id="projectInfo" href="#" rel="nofollow"><span>B按钮<br />详情</span></a> </div> </div> </form> </div> <div id="maskLayer"></div> </body> </html> dialog.css @CHARSET "UTF-8"; #maskLayer{ position: absolute; opacity: 0.5; filter:alpha(opacity=50); bottom:0; left: 0; right: 0; top: 0; background:black; z-index: 100; display: none; } #dialog { width: 350px; height: 250px; border: 1px solid #ccc; position: absolute; display: none; z-index: 9999; /* background: #fff; */ background-color: #4c86af; border-radius: 10px; cursor:pointer; } #dialog h2 { height: 40px; line-height: 40px; text-align: left; font-size: 16px; letter-spacing: 1px; color: #fff; background: #3178ae; margin: 0; padding: 0; border-bottom: 1px solid #ccc; padding-left: 1em; cursor: move; } #dialog h2 span { float: right; position: relative; top: 14px; right: 8px; background: url(images/sd_close.png) no-repeat 0px 0px; cursor: pointer; width: 17px; height: 17px; } .btn-dialog { width: 4em; /* height:4em; */ display: inline; border-radius: 4px; background-color: #2c72a7; box-shadow: 2px 2px 2px #385263; text-align: center; vertical-align: middle; line-height: 1.1em; font-size: 1.5em; color: white; padding-top: 0.8em; padding-bottom: 0.8em; overflow: hidden; } .btn-dialog a { color: white; text-decoration: none; } .btn-left { float: left; margin-left: 2em; } .btn-right { float: right; margin-right: 2em; }