jquery 弹出框居中显示

来源：互联网发布：守望先锋画质优化设置编辑：程序博客网时间：2024/05/18 00:29
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出确认框始终位于窗口的中间位置的测试</title><style type="text/css">.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; opacity: 0.1;  filter: alpha(opacity=10); z-index: 99; }.mess { position: absolute; width: 270px; height: 140px; border: 1px solid #e0e0e0; background: #ffffff; text-align: center; z-index: 101; }.mess_title{ margin:auto; background-color:#f6f0f3; height:50px; width:100%; line-height:50px;}.fontsize1{ font-size:12px;}.redcolor{ color:#ff0000;}.clickclose{ cursor:pointer;}.centerText{ line-height:25px; text-align:left; padding: 5px 0px 5px 0px;border-bottom:1px #e0e0e0 dotted;}.botttomText { text-align:right; line-height:30px; height:30px;}.botttomText a{ color:#ff6600;}</style><script type="text/javascript">$(document).ready(function() {var obj = $('.mess');        var screenWidth = $(window).width(), screenHeight = $(window).height();  //当前浏览器窗口的 宽高        var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度           var objLeft = (screenWidth - obj.width())/2 ;        var objTop = (screenHeight - obj.height())/2 + scrolltop;        obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});$('.clickclose').click(function(){$('.mask').hide();$('.mess').hide();});});</script></head><body><div class="mask"></div><div class="mess"><div class="mess_title"><table width="100%" height="50" border="0" cellspacing="0" cellpadding="0" align="center" >  <tr>    <td width="210" align="left">   <b>温馨提示</b></td>    <td align="center" class="fontsize1 clickclose">关闭</td>  </tr></table></div><div class="fontsize1 centerText"><span class="redcolor">    请尽快修改密码</span><br />          你的密码存在安全风险，请尽快修改。</div><div class="fontsize1 botttomText"><a href="">现在修改》</a></div></div></body></html>
0 0