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

Question

Я использую диалоговое окно jQuery UI с modal=true. В Chrome и Safari это отключает прокрутку с помощью полосы прокрутки и клавиш курсора (прокрутка с помощью колеса мыши и страницы вверх / вниз по-прежнему работает).

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

Кто-то поднял это три месяца назад на трекере ошибок jQuery - http://dev.jqueryui.com/ticket/4671 - не похоже, что исправление является приоритетом. :)

Так же, как и любой:

1. есть исправление для этого?
2. есть предлагаемый обходной путь, который даст хороший опыт использования?

Я экспериментирую с наведением мыши / прокруткой на части формы, но это не очень хорошее решение: (

РЕДАКТИРОВАТЬ: поддерживает Роуэн Beentje (который не на SO afaict) для поиска решения этой проблемы. Пользовательский интерфейс jQuery предотвращает прокрутку, захватывая события mouseup / mousedown. Таким образом, приведенный ниже код, кажется, исправляет это:

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

Используйте на свой страх и риск, я не знаю, какое другое немодальное поведение может разрешить отмена связывания этого материала.

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

    //...
}

Answer 4

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

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

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

Answer 5

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

Answer 6

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

$("#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

Сработало как брелок в моем случае.

Answer 7

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

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

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

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

Answer 8

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

$("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))
});

Answer 9

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