调整窗口大小时获取模态以动态调整大小答案

【问题标题】：Getting modal to dynamically resize when window is resized调整窗口大小时获取模态以动态调整大小
【发布时间】：2012-07-29 17:57:45
【问题描述】：

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

});

【问题讨论】：

在你的 CSS 中使用百分比，它会动态调整大小。你也可以创建一个监听器来调整大小：snipplr.com/view/9097

标签： jquery html css modal-dialog jquery-blockui

【解决方案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/left CSS 属性以使它们保持居中。

【讨论】：

演示：jsfiddle.net/2dpc7/2。由于 blockUI 的工作方式，我更新了我的代码，我的代码选择了不正确的元素，现在正在选择正确的元素并在 window.resize 事件上更新。请注意，我稍微更新了您自己的代码以使其正常工作（检查代码中的 height 和 top 属性）。
我已经复制并粘贴了您的代码，但是当我在第 25 行打开 Google Chrome JavaScript 控制台时，一直收到 Uncaught SyntaxError: Unexpected token ILLEGAL 错误。这似乎与 jQuery 代码有关。以下是导致错误的 js 文件的内容：pastebin.com/9GXKJPxX
不用担心这有帮助：stackoverflow.com/questions/5733275/…

【解决方案2】：

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

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

   //Do Resizing Here
});

【讨论】：

【解决方案3】：

http://jsfiddle.net/SzH4Y/

把固定宽度改成%？

【讨论】：

【解决方案4】：

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

【讨论】：

如果您希望在垂直调整大小时垂直对齐，请对顶部、底部和高度执行相同操作。
这不会使元素垂直居中。
是的。并且还调整元素的大小。试试吧。 jsfiddle.net/SzH4Y/2 双向调整大小。
您在答案中发布的链接不会垂直调整元素的大小/重新定位。您可能想更新您对新 JSFiddle 的回答。
我在第一条评论中说过，但我也会更新答案。

【解决方案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);)
});

【讨论】：