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

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

在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 2

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

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

    //Do Resizing Here 
}); 

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

叫它在resize事件

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