jQuery點擊遮罩彈出層固定居中 · 從零開始的避坑指南

[TOC] # jQuery點擊遮罩彈出層固定居中 ## html代碼 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/main.css" /> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <title>jQuery點擊遮罩彈出層固定居中代碼 - 站長素材</title> </head> <body> <br><br><br><br><br><br><br> <center> <div> <button type="button" id="ClickMe">點擊顯示彈窗遮罩</button> </div> </center> <div id="goodcover"></div> <div id="code"> <div class="close1"><a href="javascript:void(0)" id="closebt"><img src="images/close.gif"></a></div> <div class="goodtxt"> <p>微信掃一掃</p> <p>將您的團購分享到朋友圈</p> <p>讓更多朋友知道哦~</p> </div> <div class="code-img"> <img id="ewmsrc" src="images/code.jpg"></div> </div> <script> $(function() { //alert($(window).height()); $('#ClickMe').click(function() { $('#code').center(); $('#goodcover').show(); $('#code').fadeIn(); }); $('#closebt').click(function() { $('#code').hide(); $('#goodcover').hide(); }); $('#goodcover').click(function() { $('#code').hide(); $('#goodcover').hide(); }); /*var val=$(window).height(); var codeheight=$("#code").height(); var topheight=(val-codeheight)/2; $('#code').css('top',topheight);*/ 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() - $('#code').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> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>來源：<a href="http://sc.chinaz.com/" target="_blank">站長素材</a></p> </div> </body> </html> ~~~ ## css代碼 ~~~ @charset "utf-8"; /* CSS Document */ *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /*按鈕樣式*/ #ClickMe { width: 200px; height: 30px; border: 1px solid #C40000; background-color: #000; color: #FFF; margin:0 auto; } #goodcover { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 133%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: 0.50; filter: alpha(opacity=80); } #code { width: 300px; height: 500px; background-color: #fff; padding: 10px; position: absolute; display: none; left: 45%; z-index: 1002; } .close1 { width: 300px; height: 60px; } #closebt { float: right; } #closebt img { width: 20px; } .goodtxt { text-align: center; } .goodtxt p { height: 30px; line-height: 30px; font-size: 16px; color: #000; font-weight: 600; } .code-img { width: 250px; margin: 30px auto 0 auto; padding: 10px; } .code-img img { width: 240px; } ~~~ 效果如： ![](https://box.kancloud.cn/4374cbdcd9b1b89b852da71a9fb19b13_1899x952.png)