jquery - 调整窗口大小时获取模态以动态调整大小

Question

我已经设法让我的 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;
    });

});​

Answer 1

使用侦听器来处理调整大小，然后调整模态窗口的大小。或者，您可以在 CSS 中使用百分比来处理模态窗口。

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

   //Do Resizing Here
});

Answer 2

在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 属性以使它们保持居中。

Answer 3

http://jsfiddle.net/SzH4Y/

将固定宽度更改为 %?

Answer 4

只需计算宽度、左右以进行水平调整大小。左+右+宽度=100%。并对垂直调整大小的顶部、底部和高度执行相同的操作。这是演示http://jsfiddle.net/SzH4Y/2/

Answer 5

使用此功能集中任何绝对元素

     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);)
});