Проблема с полосой прокрутки с диалоговым окном jQuery UI в Chrome и Safari

Ответ 1

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

Не могли бы вы поместить содержимое диалога внутри прокручиваемого div? Таким образом, вместо всей страницы, необходимой для прокрутки, нужно просто прокрутить содержимое внутри div. Это обходное решение должно быть довольно легко выполнить.

Ответ 2

Вы можете использовать этот код: jquery.ui.dialog.patch.js

Он решил проблему для меня. Надеюсь, это решение, которое вы ищете.

Ответ 3

В то время как я согласен с тем, что люди в стороне не делают диалог, который больше, чем область просмотра, я думаю, что есть случаи, когда может потребоваться прокрутка. Диалог может выглядеть очень хорошо в разрешении, превышающем 1024 x 768, но все меньше выглядит хрустом. Или скажем, например, вы никогда не хотите, чтобы диалог отображался над заголовком вашего сайта. В моем случае у меня есть объявления, которые иногда имеют проблемы с z-index, поэтому я никогда не хочу показывать диалоги над ними. Наконец, в общем случае плохо вообще удалять какой-либо общий контроль, например прокрутку, от пользователя. Это проблема отдельно от того, насколько велик диалог.

Мне было бы интересно узнать, почему эти события в мульдаунах и мышах в первую очередь.

Я попробовал решение, которое предоставил alexis.kennedy, и он работает, не нарушая ничего, что я вижу в любом браузере.

Ответ 4

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

function showPopup()
{
    //...

    // actionContainer - is a DIV for dialog

    if ($.browser.safari == true)
    {
        // disable modal mode
        $("#actionContainer").dialog('option', 'modal', false);

        // show overlay div manually
        var tempDiv = $("<div id='tempOverlayDiv'></div>");
        tempDiv.css("background-color", "#000");
        tempDiv.css("opacity", "0.2");
        tempDiv.css("position", "absolute");
        tempDiv.css("left", 0);
        tempDiv.css("top", 0);
        tempDiv.css("width", $(document).width());
        tempDiv.css("height", $(document).height());
        $("body").append(tempDiv);
    }

    // remove overlay div on dialog close
    $("#actionContainer").bind('dialogclose', function(event, ui) {
        $("#tempOverlayDiv").remove();      
    });

    //...
}

Ответ 5

Я считаю, что слишком большие диалоги противоречат вашему требованию "хорошего удобства использования". Даже если у вас не было обходного пути из-за ошибки jQuery UI Dialog, я бы избавился от таких больших диалогов. Во всяком случае, я понимаю, что могут быть некоторые "экстремальные" случаи, в которых вам нужно адаптироваться, поэтому...

Тем не менее, это наверняка поможет, если вы приложите скриншот - вы задаете вопрос о дизайне, но мы не можем его увидеть. Но я понимаю, что вы, возможно, не сможете/не захотите показать его содержимое так, чтобы это было хорошо. Это мои слепые догадки; надеюсь, что вы найдете их полезными:

• Попробуйте разный макет для вашего диалога. Если вы это сделаете, сделайте это для всех диалогов, а не только для тех, с которыми у вас возникла проблема (пользователям не нравится изучать много разных пользовательских интерфейсов).
• Если вы не можете найти другой макет, сначала попробуйте расширить диалог. Если у вас есть много вариантов на выбор, вы можете найти хорошее решение, разделив их на два столбца.
• Зная, что вы уже используете пользовательский интерфейс jQuery, попробуйте использовать вкладки. Если у вас слишком много опций, панель с вкладками обычно является хорошим решением - пользователи "используются" для этого виджета.
• Вы говорили о "элементах" в диалоговом окне, но мы не знаем, что такое элемент. Возможно ли вообще показать их "обобщенным" способом, например, небольшой список слева и расширенный вид справа, когда вы нажимаете на них? Например, имея список с заголовками элементов слева, и когда вы нажимаете на них, вы получаете полный экран справа.

Не имея возможности увидеть дизайн, я думаю, что, насколько я могу идти.

Ответ 6

Существует обходное решение, которое отвязывает привязанное событие. Это добавляет следующее в открытое: событие диалога:

$("#longdialog").dialog({
    modal:true,
    open: function (event, ui) { window.setTimeout(function () {
        jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
    }
});

Это работает... но это уродливо

- от https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

В моем случае он работал как прелесть.

Ответ 7

Это ошибка, которая была исправлена: http://bugs.jqueryui.com/ticket/4671

Ответ 8

Пробовал ли вы расширение до диалога? http://plugins.jquery.com/project/jquery-framedialog

Ответ 9

Используйте приведенный ниже код. Он будет работать нормально.

$("dialogId").dialog({
      open: function(event, ui) {
            window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                        .unbind('mouseup.dialog-overlay');
             }, 100);
      },
      modal: true,
      safariBrowser: (function( $, undefined ) {
               if ($.ui && $.ui.dialog) {
                   $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
               }
 }(jQuery))
});