<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>弹出层效果</title> <link rel="stylesheet" href="css/theme.css" media="all"> <style> /*弹出框*/ *{ margin:0; padding:0} .new_increase{} .doc_mask{z-index: 9998;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.4;filter:alpha(opacity=40);display:none; } .doc_popover{z-index:9999;position:fixed;top:50%;left:50%;width:430px;margin:-180px 0 0 -215px;border:5px solid #e5e5e5;background:#fff;display:none;} .doc_poptit{padding:12px; height:20px;position: relative;} .doc_poptit .close{float:right;color:#999;padding:5px;margin:-2px -5px -5px;text-shadow:0 1px 0 #ddd; font-size:16px} .doc_poptit .close:hover{color:#444;} .doc_popbod{padding:10px 50px;color:#666;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(function($) { $('.new_increase').click(function(){ $('.doc_mask').fadeIn(0); $('.doc_popover').slideDown(0); }) $('.doc_poptit .close').click(function(){ $('.doc_mask').fadeOut(0); $('.doc_popover').slideUp(0); }) }) </script> </head> <body> <!-- 弹出层代码开始--> <div> <a class="new_increase" href="javascript:;">点我</a> </div> <div class="doc_popover"> <div class="doc_poptit"> <a href="javascript:;" title="关闭" class="close">x</a> </div> <div class="doc_popbod"> 内容区域 </div> </div> <div class="doc_mask"></div> <!--弹出层代码结束 --> </body>