3

我正在使用 $.blockUI 和 jQuery 来显示模态对话。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 之上的页面中心呈现 smack bang。

但是，如果我display:none在.mp_modalpopupCSS 类中进行设置，然后使用 $.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'} 
});

为什么会这样？

4

2 回答 2

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'} 
});
于 2010-03-25T18:57:30.847 回答
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',
    } 
});
于 2011-04-30T22:50:33.420 回答