스크롤 막대한 문제 jQuery UI 대화 크롬에고 사파리

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

문제

내가 사용하여 jQuery UI 과의 대화 modal=true.크롬에서 사파리 이용 스크롤를 통해 스크롤 막대 및 커서 키(마우스 휠로 스크롤하고 페이지 위/아래 여전히 작동하).

이제 대화가 너무 높이를 한 페이지에 맞게 사용자가에서 노트북을 얻을 좌절시켰다.

사람들이 세 개월 전에 jQuery 버그 추적- http://dev.jqueryui.com/ticket/4671 -처럼 보이지 않는 고정 그것은 최우선 과제입니다.:)

그래서 사람:

  1. 수정에 대한 이?
  2. 는 제안 해결 방법을 줄 것 괜찮은 유용성에 경험이 있는가?

나는 실험을 마우스 오버/central 에 조금의 형태로,그러나 그것은 좋은 해결책:(

편집: 소품을 완 Beentje(지에서 afaict)에 대한 해결책을 찾는다.jQuery UI 방지 스크롤를 캡처하여 mouseup/mousedown 이벤트입니다.그래서 아래 코드를 해결하기 위해 보인다:

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

자신의 위험에 사용,I don't know what 다른 unmodal 행동을 해제하는 물건이 허용 할 수 있습니다.

도움이 되었습니까?

해결책

나는 이전 포스터에 있는 경우에는 대화하지 않은 당신을 위해 일하고,그것은 좋은 수 있습니다 다시 생각하는 당신의 디자인이다.그러나 내가 제공 할 수 있습니다.

할 수 있는 대화 콘텐츠 안에 스크롤 div?는 방법 대신 페이지 전체를 필요로 스크롤하려면,콘텐츠만 내부에 div 것이 필요로 스크롤합니다.이는 해결 방법이 매우 쉬워야 한 달성하기 너무입니다.

다른 팁

이 코드를 사용할 수 있: jquery.ui.dialog.patch.js

그것이 문제를 해결했습니다.희망이 있는 솔루션을 찾고 있습니다.

는 동안 동의,함께 사람들의 파티를 만들지 않는 대화상자는 더 뷰포트보다,내가 생각하는 경우가 있 스크롤 필요할 수 있습니다.대화할 수 있는 매우 좋은 큰 해상도 1024x768,하지만 아무것도 보이는 났.또는,예를 들어 말을 대화면 표시 이상의 헤더가 귀하의 사이트입니다.내 경우에는 광고하는 때때 플래시 플 z-index 문제,그래서 나는 결코 원하는 대화 상자를 표시이다.마지막으로,그것은 나쁜 일을 멀리하는 모든 종류의 일반적인 제어,다음과 같 스크롤텔에서는 사용자.이 문제는 별도의에서 얼마나 큰 대화입니다.

나는 것을 아는 것에 관심이 왜 그 mousedown 및 mouseup 이벤트가 있습니다.

나는 솔루션을 알렉시스.kennedy 제공되며 그것은 작동하지 않고 휴식을 깨는 아무것도 난 볼 수 있습니다 어떤 브라우저입니다.

나는 해결 방법 이 상황을 비활성화하여 대화달 모드를 보여주는 오버레이동:

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

    //...
}

내가 믿는 너무 큰 대화 상자에 대하여 당신의'괜찮은 유용성을 요구합니다.도 가지고 있지 않은 경우를 대안이 있으로 인해 jQuery UI 대화 버그,내가 없애는 등 큰 대화 상자를 재생할 수 있습니다.어쨌든 이해하고 있을 수 있습'극단적'해야 하는 경우에 적응하는,그래서...

는 말했다,그것은 확실히 도움이에 연결한 경우 일부는 스크린 샷을-당신이 질문에 대한 디자인,하지만 우리는 그것을 볼 수 없습니다.그러나 나는 당신을 이해하지 못할 수도 있/기꺼이의 내용을 표시한다 그것은 그래서 그렇게 하셔도 좋습니다.이들은 나 맹 추측;희망을 찾을 그들에게 유용합니다:

  • 도 다른 레이아웃 대한의 대화입니다.이렇게 하면,그것을 위해 모든 대화뿐만 아니라 당신은 문제가(사용자가를 좋아하지 않을 배우고 많은 다른 UIs).
  • 을 찾을 수 없는 경우 다른 레이아웃,시험 확대의 대화 첫째.이 있는 경우 많은 옵션을 선택할 수 있는 좋은 솔루션으로 나누어에서 두 개의 열이 있습니다.
  • 알고 이미 사용하고 있 jQuery UI 사용하십시오 탭.는 경우에 당신은 너무 많은 옵션 탭 위원회는 일반적으로 좋은 솔루션을 사용할 수 있도록 설계되었습니다.'사용'하는 위젯입니다.
  • 당신에 대해 이야기'항목에서'대지만,우리는 무엇인지 모르는 아이템입니다.그것은 전혀 그들에게 보여서 요약된'방식 등의 작은 목록이 왼쪽에 있는 확장에서 보기 오른쪽에 당신이 그들을 클릭하면?예를 들어,항목 목록 제목 왼쪽에 있고,당신이 그들을 클릭하면 당신은 전체 화면 오른쪽에 있습니다.

없이 볼 수 있는 디자인에 나는 지금까지 내가 갈 수 있습니다.

이 문제를 해결할 수 있는 방법이는 바인딩을 해제하십시 바인딩 이벤트입니다.이 추가로 다음에 열:이벤트의 대화상자:

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

가 할 수 있습니다.

이것이 버그가 되었습 때문에 고정:http://bugs.jqueryui.com/ticket/4671

았다 당신은 내장하여 대화? http://plugins.jquery.com/project/jquery-framedialog

코드를 사용하여 아래.그것은 잘 작동합니다.

$("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))
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top