1

Block UIのモーダル死点を取得できましたが、ウィンドウのサイズを変更（縮小または拡大）すると、モーダル（および周囲のオーバーレイ）のサイズが動的に変更されないという問題があります。jQueryを使用してこれを実現する方法はありますか？これが私がこれまでに行ったことです：http：//jsfiddle.net/2dpc7/。結果ペインをドラッグしようとすると、モーダルが実際には動的に調整されていないことがわかります。どうしてこれなの？

HTML

<div style="float: left;">
        <a id="about" class="windowClass" href="#">About</a>&nbsp;&middot;
        <a id="terms" class="windowClass" href="#">Terms</a>&nbsp;&middot;
        <a id="privacy" class="windowClass" href="#">Privacy</a>&nbsp;&middot;
        <a id="language" class="windowClass" href="#">Language: English</a>
</div>
<div id="register_win" class="modal">
    <span class="modal_header">Register</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="register_close">
    </div>
</div>
<div id="about_win" class="modal">
    <span class="modal_header">About</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="about_close">
    </div>
</div>
<div id="terms_win" class="modal">
    <span class="modal_header">Terms</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="terms_close">
    </div>
</div>
<div id="privacy_win" class="modal">
    <span class="modal_header">Privacy</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="privacy_close">
    </div>
</div>
<div id="forgotpwd_win" class="modal">
    <span class="modal_header">Forgotten your password?</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="forgotpwd_close">
    </div>
</div>
<div id="language_win" class="modal">
    <span class="modal_header">Language</span>
    <div class="modal_close">
        <img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="language_close">
    </div>
</div>

CSS </ p> 

.modal {
    display: none;
    padding: 10px;
    cursor: default;
}
.modal_header {
    font-family: Verdana, Geneva, sans-serif;
    float: left;
}
.modal_close {
    cursor: pointer;
    float: right;
}​

JS

$(document).ready(function () {

    $('.windowClass').click(function () { // <-- bind to all window elements with that class
        $.blockUI({
            message: $('#' + this.id + '_win'),
            css: {
                top:  ($(window).height() - 200) /2 + 'px', 
                left: ($(window).width() - 200) /2 + 'px', 
                width: '200px'
            }
        });
    });

    $('[id$=_close]').click(function () { //<-- gets all elements with id's that end with close
        $.unblockUI();
        return false;
    });

});​
4

5 に答える 5

1

リスナーを使用してサイズ変更を処理してから、モーダルウィンドウのサイズを変更します。または、CSSでパーセンテージを使用して、モーダルウィンドウを処理することもできます。

$(window).bind("resize", function() {
   var newWindowHeight = $(window).height(),
       newWindowWidth = $(window).width();

   //Do Resizing Here
});
于 2012-07-31T21:15:58.070 に答える
1

イベントではwindow.resize、要素を再配置できます。

$(window).on('resize', function () {
    $('body').children('.blockMsg').css({
        top  : ($(window).height() - 40) /2 + 'px', 
        left : ($(window).width() - 200) /2 + 'px'
    });
});​

これがデモです：http：//jsfiddle.net/2dpc7/2/

これにより、現在のblockUIモーダルが検出され、それらのtop/ leftCSSプロパティが中央に配置されるように更新されます。

于 2012-07-31T21:17:16.783 に答える
1

http://jsfiddle.net/SzH4Y/

固定幅を％に変更しますか？

于 2012-07-31T21:17:22.400 に答える
1

水平方向のサイズ変更のために、幅、右、左を計算するだけです。左+右+幅=100％。垂直方向のサイズ変更の場合は、上部、下部、高さについても同じようにします。こちらがデモですhttp://jsfiddle.net/SzH4Y/2/

于 2012-07-31T21:34:03.313 に答える
1

この関数を使用して、絶対要素を一元化します

     function centeralizeToParent(parentElement, absoluteChild) {
        var parentHeight = parseFloat($(parentElement).css('height'));
        var parentWidth = parseFloat($(parentElement).css('width'));
        var childHeight = parseFloat($(absoluteChild).css('height'));
        var childWidth = parseFloat($(absoluteChild).css('width'));
        var YMargin = (parentHeight - childHeight) / 2;
        var XMargin = (parentWidth - childWidth) / 2;
        YMargin = YMargin < 0 ? 0 : YMargin;
        XMargin = XMargin < 0 ? 0 : XMargin;
        $(absoluteChild).css('top', YMargin + 'px');
        $(absoluteChild).css('left', XMargin + 'px');
    }

サイズ変更イベントで呼び出す

$(window).resize(function () {
            centeralizeToParent($('html')[0], modal);)
});
于 2015-11-02T08:24:33.393 に答える