<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.1.js"></script> <style> #valuecover {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 133%;background-color: #000;z-index: 1001;-moz-opacity: .8;opacity: .5;filter: alpha(opacity=80);} #values {width: 600px;height: 500px;background-color: #fff;margin: 20px;position: absolute;display: none;left: 0 !important;z-index: 1002;overflow-y: scroll;border-radius: 10px;} .valuetxt {padding: 50px;font-size: 25px;} </style> </head> <body> <a href="javascript:;" class="checkValue">资费说明</a> <!--弹出框 开始--> <div id="valuecover"></div> <div id="values"> <div class="valuetxt"> <h3 style="text-align: center; margin-bottom: 20px;font-size: 30px;color: #029421">资费说明</h3> <p>资费说明资费说明资费说明资费说明</p> </div> </div> <!--弹出框 结束--> <script> $(function() { //alert($(window).height()); $('.checkValue').click(function() { $('#values').center(); $('#valuecover').show(); $('#values').fadeIn(); $("body").css("overflow","hidden") }); $('#valuecover').click(function() { $('#values').hide(); $('#valuecover').hide(); $("body").css("overflow","auto") }); jQuery.fn.center = function(loaded) { var obj = this; body_width = parseInt($(window).width()); body_height = parseInt($(window).height()); block_width = parseInt(obj.width()); block_height = parseInt(obj.height()); left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft()); if (body_width < block_width) { left_position = 0 + $(window).scrollLeft(); }; top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop()); if (body_height < block_height) { top_position = 0 + $(window).scrollTop(); }; if (!loaded) { obj.css({ 'position': 'absolute' }); obj.css({ 'top': ($(window).height() - $('#values').height()) * 0.5, 'left': left_position }); $(window).bind('resize', function() { obj.center(!loaded); }); $(window).bind('scroll', function() { obj.center(!loaded); }); } else { obj.stop(); obj.css({ 'position': 'absolute' }); obj.animate({ 'top': top_position }, 200, 'linear'); } } }) </script> </body> </html>