我正在使用带有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之上呈现页面中心.
但是,如果我在.mp_modalpopup CSS类中设置display:none,然后使用$.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'} });
为什么会这样?