Как изменить размер диалогового окна jquery ui с помощью браузера - PullRequest
Новая
       19

Как изменить размер диалогового окна jquery ui с помощью браузера

3 голосов
/ 27 марта 2012

Я открываю диалог jquery ui и загружаю в него некоторый контент.Но когда я изменяю размер браузера, диалог jq не меняет его ширину / высоту.Я попробовал несколько вещей, но не повезлоВот как я его открываю: 

$(document).ready(function () {
    var wWidth = $(window).width();
            var dWidth = wWidth * 0.9;
            var wHeight = $(window).height();
            var dHeight = wHeight * 0.9;

            $(".openDialog").live("click", function (e) {
                e.preventDefault();
                $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true,
                        resizable: false,
                        show: 'fade',
                        width: dWidth,
                        height: dHeight,                    
                        create: function (event, ui) {
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").css("display", "none");

                            $(this).parents(".ui-dialog").css("padding", 0);
                            $(this).parents(".ui-dialog").css("border", 0);
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("padding", 0);

                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("background", "#000000");
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("overflow", "hidden");

                        }  

                    })
                    .load(this.href);
            });
$(window).resize(function () {
            var wWidth = $(window).width();
            var dWidth = wWidth * 0.9;
            var wHeight = $(window).height();
            var dHeight = wHeight * 0.9;
            $(".openDialog").dialog("option", "width", dWidth);
            $(".openDialog").dialog("option", "height", dHeight);
        });
});

Ответы [ 3 ]

9 голосов
/ 27 марта 2012

После того, как диалоговое окно было открыто, ширина и высота являются статическими, если они не изменены.Привязать событие к изменению размера окна, которое изменит его.

$(window).resize(function() {
    var wWidth = $(window).width();
    var dWidth = wWidth * 0.9;
    var wHeight = $(window).height();
    var dHeight = wHeight * 0.9;
    $("#data-dialog-id").dialog("option", "width", dWidth);
    $("#data-dialog-id").dialog("option", "height", dHeight);
});
0 голосов
/ 22 апреля 2015

Похоже, у @jasonday есть хороший скрипт, который дополняет функциональность диалогового окна JQuery UI - кажется, он работает довольно хорошо для меня.

Вот его SO ответ

Вот его скрипт на github: jQuery-UI-Dialog-extended

0 голосов
/ 17 июля 2014

Я думаю, что если вы запускаете событие, изменяющее размер вне диалогового окна, оно должно сделать это.

$ (".selector") .dialog ("resize");

...