problema barra de rolagem com jQuery UI diálogo no Chrome e Safari

StackOverflow https://stackoverflow.com/questions/1617638

Pergunta

Eu estou usando o diálogo jQuery UI com modal=true. No Chrome e Safari, isso desativa rolagem através das teclas da barra de rolagem e de cursor (rolagem com a roda do mouse e page up / down ainda funciona).

Este é um problema se o diálogo é alto demais para caber em uma única página -. Usuários em um laptop ficar frustrado

Alguém levantou esta há três meses sobre o rastreador de bug do jQuery - http://dev.jqueryui.com/ bilhete / 4671 - ele não se parece com corrigi-lo é uma prioridade. :)

Então, alguém:

  1. tem uma correção para isso?
  2. ter uma solução alternativa sugerida que daria uma experiência de usabilidade decente?

Eu estou experimentando com mouseover / scrollTo em pedaços de forma, mas não é uma grande solução: (

EDIT: adereços para Rowan Beentje (que não está no SO AFAICT) para encontrar uma solução para isso. previne jQuery UI rolagem através da captura dos eventos mouseup / mousedown. Assim, o código a seguir parece corrigi-lo: 

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

Use por conta e risco, eu não sei o que outros comportamentos unmodal desvinculação este material pode permitir.

Foi útil?

Solução

Eu concordo com os cartazes anteriores, em que, se o diálogo não está funcionando para você, pode ser bom para repensar o seu design. No entanto, posso oferecer uma sugestão.

Você poderia colocar o conteúdo de diálogo dentro de uma div scrollable? Dessa forma, em vez de toda a página necessidade de rolagem, apenas o conteúdo dentro da div precisaria de rolagem. Esta solução alternativa deve ser bastante fácil de realizar também.

Outras dicas

Você pode usar este código: jquery.ui.dialog.patch js

Ele resolveu o problema para mim. Esperamos que esta é a solução que você está procurando.

Embora concorde com os povos no partido de não fazer um diálogo que é maior do que a janela de exibição, eu acho que há casos em que rolagem pode ser necessária. Uma caixa de diálogo pode parecer muito bom em uma maior resolução a 1024 x 768, mas nada menos olhares rangia. Ou dizer por exemplo que você nunca quer um diálogo para mostrar-se sobre o cabeçalho do seu site. No meu caso eu tenho anúncios que ocasionalmente têm problemas de flash z-index, então eu nunca quero diálogos para mostrar acima deles. Finalmente, é ruim em geral, para tirar qualquer tipo de controle comum, como rolagem, longe do usuário. Este é um problema separado do quão grande é o diálogo é.

Eu estaria interessado em saber por que os esses eventos MouseDown e MouseUp estão lá em primeiro lugar.

Eu tentei a solução que alexis.kennedy fornecido e funciona ruptura sem quebrar qualquer coisa que eu posso ver em qualquer navegador.

Eu contornar esta situação, desativando o modo modal de diálogo e mostrando sobreposição manualmente: 

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

    //...
}

Eu acredito que ter muito grandes diálogos é contra sua exigência 'decente experiência usabilidade'. Mesmo se você não tem que ter uma solução alternativa devido ao bug jQuery UI diálogo, eu se livrar de tais grandes diálogos. De qualquer forma, eu entendo, pode haver alguns casos 'extremos' em que você precisa se adaptar, então ...

Dito isto, certamente ajudaria se você anexado alguns imagem - você está fazendo uma pergunta sobre um projeto, mas não podemos vê-lo. Mas eu entendo que você pode não ser capaz / dispostos a mostrar o conteúdo do mesmo modo que é bom. Estas são as minhas cegos suposições; espero que você encontrá-los úteis:

  • Tente um layout diferente para o seu diálogo. Se você fizer isso, fazê-lo para todos os diálogos, não apenas os que você está tendo problema com (os usuários não gostam de aprender muitas interfaces diferentes).
  • Se você não consegue encontrar um layout diferente, tente alargando o seu diálogo em primeiro lugar. SE você tem muitas opções para escolher, você pode encontrar uma boa solução, dividindo-os em duas colunas.
  • Sabendo que você já está usando jQuery UI, tente usar guias . Se você tem muitas opções, um painel com abas é geralmente uma boa solução -. Usuários são 'usado' para esse widget
  • Você falou sobre 'itens' na caixa de diálogo, mas não sabemos o que é um item. É possível em tudo para mostrar-lhes de uma forma 'resumidos', como uma pequena lista à esquerda e uma visão ampliada do lado direito quando você clicar sobre eles? Por exemplo, ter uma lista com os itens títulos à esquerda, e quando você clica neles você tem a plena exibição à direita.

Sem ser capaz de ver o projeto, eu acho que é tão longe quanto eu posso ir.

Há uma solução que desvincular o evento binded. Isso adiciona o seguinte no aberto: evento da caixa de diálogo: 

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

Isso funciona ... mas isso é feio

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

Trabalhou como um encanto no meu caso.

Este é um erro que já foi corrigido: http://bugs.jqueryui.com/ticket/4671

Você tentou meu extensão para o diálogo? http://plugins.jquery.com/project/jquery-framedialog

Use o código abaixo. Ele vai funcionar bem. 

$("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))
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top