我正在使用带有jQuery的$ .blockUI来显示模态对话。 HTML看起来像:
<div id="progressDialogue" class="mp_modalpopup">
<div class="mp_container">
<div class="mp_header">
<span id="pd_header_text" class="mp_msg">Please wait..</span>
</div>
<div class="mp_body">
<img src="ajax-loader.gif" style="text-align:center" alt="loading" />
</div>
</div>
</div>
CSS看起来像:
.mp_modalpopup
{
font-family: arial,helvetica,clean,sans-serif;
font-size: small;
padding: 2px 3px;
bottom: 50%;
right: 50%;
position: absolute;
width: 400px;
z-index:999;
}
.mp_container
{
width: 400px;
border: solid 1px #808080;
border-width: 1px 1px;
left: 50%;
position: relative;
top: 50%;
}
/* removed mp_header, mp_body, mp_msg CSS for brevity */
这将很乐意在其他HTML之上呈现页面中心。
但是,如果我在display:none
CSS类中设置.mp_modalpopup
,然后使用$ .blockUI使其可见,则在IE 8中,对话框会自动垂直对齐,但左对齐一半对话框页面和Google Chrome和Firefox中的对话框根本不可见(但是由于页面灰显,所以blockUI正常工作)。
这是blockUI javascript:
$.blockUI.defaults.css = {};
$.blockUI({
message: $('#progressDialogue'),
overlayCSS: { backgroundColor: '#000', opacity: 0.1 },
css: {backgroundColor: '#00f', color: '#100'}
});
为什么会这样?
答案 0 :(得分:5)
这种情况正在发生,因为blockUI也试图将您的<div>
居中。如果从CSS中删除所有定位,它应该可以正常工作。
删除它:
bottom: 50%;
right: 50%;
position: absolute;
这个
left: 50%;
position: relative;
top: 50%;
或者,您可以像这样禁用blockUI
居中:
$.blockUI({
centerX: false,
centerY: false,
message: $('#progressDialogue'),
overlayCSS: { backgroundColor: '#000', opacity: 0.1 },
css: {backgroundColor: '#00f', color: '#100'}
});
答案 1 :(得分:2)
实际上我刚刚找到了一个非常简单的解决方案。
如果您阻止元素而不是整个页面,则blockUI会为您提供使用centerX和centerY的选项。
我阻止了元素html,就是这样。我的div是水平和垂直居中的。事实上,我不希望它垂直居中,所以我将centerY设置为false,并在CSS中设置为top:'5%',如下所示。还要确保在blockUI css中设置元素的宽度。
$('html').block({ message: $('#layOver'),
centerX: true,
centerY: false,
css: {
top: '5%',
width: '720px',
height: 'auto',
cursor: 'null',
border: 'none',
textalign: 'center',
backgroundColor: 'auto',
},
overlayCSS: {
opacity: 0.4 ,
cursor: 'null',
}
});