码迷,mamicode.com
首页 > Web开发 > 详细

JS控制DIV居中对齐

时间:2017-05-16 10:53:10      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:获取   rgba   ack   isp   mod   cli   padding   osi   center   

你真的认为居中对齐那么简单那么我们现在升个级,毕竟要打得怪有点难。。。

技术分享

<div id="hz_qxalert1_id" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.701961);">
<div id="hz_qxalert1_id_next" style="width: 400px; height: 203px; padding: 0px 0px 20px; position: absolute; top: 248px; left: 484px; z-index: 500; border: 1px solid rgb(22, 138, 187); border-radius: 5px; overflow: hidden; display: block; background: rgb(255, 255, 255);">
<p style="padding: 0 0 0 28px;text-align: left; height:50px; line-height:50px; z-index: 500;">消息会诊</p>
<hr style="border-color:#ccc;width: 80%;margin: 0 auto;">
<p class="alert_text" style="height: 80px; line-height:80px; z-index: 500;text-align: center;">您将取消会诊,确认取消会诊吗?</p>
<button onclick="enterOut()" class="btn1" style=" z-index: 500;height:30px; outline: none;text-align: center;background: #168ABB;border:0;color:#fff; border-radius:5px;width: 89px;margin-left: 185px;">是</button>
<button class="btn1" style="height:30px; outline: none;text-align: center;background: #168ABB;border:0;color:#fff; border-radius:5px;width: 89px; z-index: 500;">否</button>
</div>
</div>

如这个代码弹出的模态框,怎么样让这个中间白色的块居中对齐,代码如下

//获取黑色遮罩层的宽、高
var modelWidth = $(‘#hz_qxalert1_id‘).width();
var modelHeight= $(‘#hz_qxalert1_id‘).height();

//获取取消会诊确认框的宽、高
var alertWidth = $(‘#hz_qxalert1_id_next‘).width();
var alertHeight= $(‘#hz_qxalert1_id_next‘).height();

//让取消会诊确认框相对于模态框居中
parent.document.getElementById(‘hz_qxalert1_id_next‘).style.left = (modelWidth-alertWidth)/2+"px";
parent.document.getElementById(‘hz_qxalert1_id_next‘).style.top = (modelHeight-alertHeight)/2+"px";

//让取消会诊的确认框显示出来
document.getElementById(‘hz_qxalert1_id_next‘).style.display = "block";

JS控制DIV居中对齐

标签:获取   rgba   ack   isp   mod   cli   padding   osi   center   

原文地址:http://www.cnblogs.com/hjptopshow/p/6859814.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!