Получение модального динамического изменения размера при изменении размера окна

Мне удалось получить мертвую точку модального интерфейса 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;
    });

});​

html jquery css modal-dialog jquery-blockui
person methuselah    schedule 31.07.2012    source источник
comment
Используйте проценты в своем CSS, и он будет динамически изменять размер. Вы также можете создать прослушиватель для изменения размера: snipplr.com/view/9097   -  person Jack    schedule 01.08.2012

Ответы (5)


arrow_upward
1
arrow_downward

В событии 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, чтобы они оставались в центре.

person Jasper    schedule 31.07.2012
comment
Демонстрация: jsfiddle.net/2dpc7/2. Я обновил свой код из-за того, как работает blockUI, мой код выбирал неправильный элемент, теперь правильный элемент выбирается и обновляется в событии window.resize. Обратите внимание, что я немного обновил ваш собственный код, чтобы он работал хорошо (проверьте свойства height и top в вашем коде). - person Jasper; 01.08.2012
comment
Я скопировал и вставил ваш код, но продолжаю получать ошибку Uncaught SyntaxError: Unexpected token ILLEGAL, когда открываю консоль JavaScript Google Chrome в строке 25. Похоже, это происходит с кодом jQuery. Вот содержимое файла js, который вызывает ошибку: pastebin.com/9GXKJPxX - person methuselah; 01.08.2012
comment
Не беспокойтесь, это помогло: stackoverflow. ком/вопросы/5733275/ - person methuselah; 01.08.2012

arrow_upward
1
arrow_downward

Используйте прослушиватель для обработки изменения размера, а затем измените размер модального окна. В качестве альтернативы вы можете использовать проценты в своем CSS для обработки модального окна.

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

   //Do Resizing Here
});
person Jack    schedule 31.07.2012

arrow_upward
1
arrow_downward

http://jsfiddle.net/SzH4Y/

изменить фиксированную ширину на %?

person Xhynk    schedule 31.07.2012

arrow_upward
1
arrow_downward

просто рассчитайте ширину, справа и слева для изменения размера по горизонтали. влево+вправо+ширина=100%. и сделайте то же самое с верхом, низом и высотой для изменения размера по вертикали. вот демо http://jsfiddle.net/SzH4Y/2/

person Miljan Puzović    schedule 31.07.2012
comment
и сделайте то же самое для верха, низа и высоты, если вы хотите вертикальное выравнивание по вертикальному изменению размера. - person Miljan Puzović; 01.08.2012
comment
Это не центрирует элемент по вертикали. - person Jasper; 01.08.2012
comment
Да, это так. А также изменяет размер элемента. Попытайся. jsfiddle.net/SzH4Y/2 измените его размер в обоих направлениях. - person Miljan Puzović; 01.08.2012
comment
Ссылка, которую вы разместили в своем ответе, не изменяет размер / положение элемента по вертикали. Вероятно, вы захотите обновить свой ответ на новый JSFiddle. - person Jasper; 01.08.2012
comment
я сказал это в первом комментарии, но я также обновлю ответ. - person Miljan Puzović; 01.08.2012

arrow_upward
1
arrow_downward

Используйте эту функцию, чтобы централизовать любой абсолютный элемент

     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);)
});
person yousif.aljamri    schedule 02.11.2015