<!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} .view_more{ font-size:20px; color:#E4007F; margin-left:30px;-font-family:"微软雅黑"} .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> jQuery(document).ready(function($) { $('.view_more').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="view_more" 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>