獲取模態以在窗口大小調整時動態調整大小

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