3

モーダルダイアログを表示するために、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ではダイアログは垂直方向に中央揃えになりますが、ダイアログの半分がページの外に左揃えになり、GoogleChromeとFirefoxではダイアログが表示されません。すべて（ただし、ページがグレー表示されるため、blockUIは機能しています）。

これはblockUIjavascriptです：

$.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は水平方向と垂直方向の中央に配置されました。Ofourse 縦方向に中央揃えしたくないので、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 に答える