Getting modal to dynamically resize when window is resized

Question

I've managed to get my Block UI modal dead centre but now the problem is that when the window is resized (made smaller or bigger), the modal (and the surrounding overlay) does not dynamically resize. Is there a way I can achieve this using jQuery? Here is what I've done so far: http://jsfiddle.net/2dpc7/. If you try dragging the Results panes then you can see that the modal doesn't really dynamically adjust to fit. Why is this?

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

});

Use percentages in your CSS and it will dynamically re-size. You can also create a listener for resize: http://snipplr.com/view/9097/ — Jack, Jul 31 '12 at 21:13

score 1 · Answer 1 · answered Jul 31 '12 at 21:15

Use a listener to handle the resize and then resize your modal window. Alternatively you can use percentages in your CSS to handle the modal window.

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

   //Do Resizing Here
});

Jasper · Accepted Answer · 2012-07-31T22:13:49.557

1

On the window.resize event you can re-position the element:

$(window).on('resize', function () {
    $('body').children('.blockMsg').css({
        top  : ($(window).height() - 40) /2 + 'px', 
        left : ($(window).width() - 200) /2 + 'px'
    });
});

Here is a demo: http://jsfiddle.net/2dpc7/2/

This will find any current blockUI modals and update their top/left CSS properties to keep them centered.

edited Jul 31 '12 at 22:13

answered Jul 31 '12 at 21:17

Jasper

75,717
14
151
146

Demo: http://jsfiddle.net/2dpc7/2/. I updated my code because of the way blockUI works, my code was selecting the incorrect element, now the correct element is being selected and updated on the `window.resize` event. Note that I slightly updated your own code for this to work well (check the `height` and `top` properties in your code). – Jasper Jul 31 '12 at 22:14
I've copied and pasted your code but keep getting a `Uncaught SyntaxError: Unexpected token ILLEGAL` error when I open up the Google Chrome JavaScript console on line 25. This is happening with the jQuery code it seems. Here are the contents of the js file that is causing the error: http://pastebin.com/9GXKJPxX – methuselah Jul 31 '12 at 22:29
No worries this helped: http://stackoverflow.com/questions/5733275/chrome-uncaught-syntax-error-unexpected-token-illegal – methuselah Jul 31 '12 at 22:36

score 1 · Answer 3 · answered Jul 31 '12 at 21:17

1

http://jsfiddle.net/SzH4Y/

change the fixed width to a %?

answered Jul 31 '12 at 21:17

Xhynk

13,513
8
32
69

Miljan Puzović · Answer 4 · 2012-07-31T22:58:19.513

1

just calculate width, right and left for horizontal resizing. left+right+width=100%. and do the same with top, bottom, and height for vertical resizing. here is demo http://jsfiddle.net/SzH4Y/2/

edited Jul 31 '12 at 22:58

answered Jul 31 '12 at 21:34

Miljan Puzović

5,840
1
24
30

and do the same for top, bottom and height if you want vertical align on vertical resize. – Miljan Puzović Jul 31 '12 at 21:41
This does not center the element vertically. – Jasper Jul 31 '12 at 22:16
Yes it does. And also resizes element. Try it. http://jsfiddle.net/SzH4Y/2/ resize it in both directions. – Miljan Puzović Jul 31 '12 at 22:22
The link you posted in your answer does not resize/reposition the element vertically. You probably want to update your answer to the new JSFiddle. – Jasper Jul 31 '12 at 22:43
i sayed that in the first comment, but i will update answer also. – Miljan Puzović Jul 31 '12 at 22:56

score 1 · Answer 5 · answered Nov 02 '15 at 08:24

Use This function to centralize any absolute element

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

call it at resize event

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

Getting modal to dynamically resize when window is resized

5 Answers5