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

Question

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

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

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

Как и любой другой:

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

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

Редактировать : спасибо Роуэн Бинт (которая не так уж и напугана) за то, что нашла решение этой проблемы.Пользовательский интерфейс 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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

    //...
}

Answer 5

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

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

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

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

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 / тянуть / 230 # issuecomment-3630449

В моем случае работал как шарм.

Answer 7

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

Answer 8

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

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