Максимальная ширина диалога не влияет, если для ширины установлено значение auto - PullRequest
Новая
       23

Максимальная ширина диалога не влияет, если для ширины установлено значение auto

1 голос
/ 21 декабря 2011

Я пытаюсь заставить диалог использовать автоматическую ширину и высоту, но только до определенной ширины.Но maxWidth не вступает в силу, пока я вручную не изменю размер открытого диалогового окна.

Как я могу автоматически запустить проверку ширины?

Пример кода: http://jsfiddle.net/yy9Cd/6/

Ответы [ 4 ]

2 голосов
/ 21 декабря 2011

Никогда не делал много работы с jQuery UI. Но вот исправление того, что у вас есть, очевидно, я установил maxWidth на 50px, поэтому измените его! 

$(document).ready(function(){

var myDialog = $("#myDialog").dialog({
    autoOpen: false,
    maxWidth: "50px",
    height: 'auto',
});

$("#showDialog").click(function(){
    myDialog.dialog("open");
});

});
2 голосов
/ 23 августа 2012

Установка свойства CSS max-width действительно гарантирует, что диалоговое окно не будет превышать эту ширину, но результирующий диалог ведет себя хаотично (переполнение не надежно, дескриптор изменения размера может быть не в том месте), потому что jQuery неосведомлен о вашей обстановке. Вот мое решение: 

    var maxWidth = 750;
    var maxHeight = 600;

    var popup = $("<div>" + content + "</div>")
        .dialog({
            autoOpen: true,
            title: title,
            hide: { effect: 'drop', direction: "up" },
            height: 'auto',
            width: 'auto',
            maxHeight: maxHeight,
            maxWidth: maxWidth,
            modal: modal,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

    var w = popup.dialog("widget").width();
    console.log("w=",w);
    if (w > maxWidth) {
        popup.dialog("option", "width", maxWidth)
        popup.dialog("widget").width(maxWidth);
    }

    var h = popup.dialog("widget").height();
    console.log("h=",h);
    if (h > maxHeight) {
        popup.dialog("option", "height", maxHeight)
        popup.dialog("widget").height(maxHeight);
    }

    w = popup.dialog("widget").width();
    console.log("w2=",w);
    h = popup.dialog("widget").height();
    console.log("h2=",h);
0 голосов
/ 09 февраля 2018

Если вы хотите что-то немного «отзывчивое», я предлагаю это. Зафиксируйте максимальный и минимальный размер для вашего диалога и настройте его в соответствии с размером окна.

В зависимости от вашего диалога, измените значения на мин или макс. Между этими пределами, он масштабируется до 50% от размера окна. И это по центру. 

$(document).ready(function () {

        var maxWidth = 500;
        var maxHeight = 300;
        var minWidth = 250;
        var minHeight = 180;

         function diagSize () {
             var wid = $(window).width() * 0.50;
             if (wid > maxWidth) {
                 wid = maxWidth;
             } else if (wid < minWidth) {
                 wid = minWidth
             }
             var hei = $(window).height() * 0.50;
             if (hei > maxHeight) {
                 hei = maxHeight;
             } else if (hei < minHeight) {
                 hei = minHeight
             }
             $("#mydialog").dialog({height: hei, width: wid});
             $("#mydialog").dialog("option", "position", {my: "center", at: "center", of: window});
         }

Тогда ваш диалог: 

var mydialog = $("#mydialog).dialog({
            autoOpen: false,
            closeOnEscape: true,
            modal: true,
            resizable: false,
            buttons: {
                "<spring:message code="action.cancel"/>": function () {
                    $(this).dialog("close");
                },
                "<spring:message code="action.next"/>": function () {
                    $.post({
                        url: '/myurl',
                        success: function(data) {

                        },
                    });
                }
            }
        });

И, наконец, измените размер вашего диалога на 2 случая: изменение размера окна и перед открытием: 

$(window).resize(diagSize);

$("#btnopenmydialog").on('click', function () {
    diagSize ();
    mydialog.dialog("open");

Закрытие $ (документ) .ready 

});
0 голосов
/ 21 декабря 2011

Разве вы не можете просто удалить свойства "ширина" и "высота"?http://jsfiddle.net/Ve79f/

...