我在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顶部的页面中心呈现sm啪声。

但是,如果我在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'}
});


为什么会这样呢?

最佳答案

发生这种情况是因为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'}
});

10-05 20:40
查看更多