jquery 弹出框居中显示

最新推荐文章于 2022-04-01 10:33:00 发布

fuyangclj

最新推荐文章于 2022-04-01 10:33:00 发布

阅读量1.3k

点赞数

分类专栏： Jquery 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/clj9017/article/details/42987537

版权

Jquery 专栏收录该内容

19 篇文章

订阅专栏

<!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>