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

.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 / left CSS属性以使其保持居中。

Answer 3

http://jsfiddle.net/SzH4Y/

将固定宽度更改为％？

Answer 4

只计算水平调整大小的宽度，左右。左+右+宽度= 100％。并对顶部，底部和高度执行相同的操作以进行垂直调整大小。这是demo 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');
    }

在resize事件中调用它

$(window).resize(function () {
            centeralizeToParent($('html')[0], modal);)
});

调整窗口大小时让模态动态调整大小

5 个答案: