Диалоговое окно jQuery UI - прокрутка внешнего окна при прокрутке внутри диалога - PullRequest
Новая
       16

Диалоговое окно jQuery UI - прокрутка внешнего окна при прокрутке внутри диалога

16 голосов
/ 03 августа 2010

Я использую диалоговое окно jQuery UI , чтобы показать всплывающее окно со страницей. Когда я прокручиваю внутри всплывающего окна и если полосы прокрутки доходят до дна, родительская страница начинает прокручиваться. Как я могу ограничить прокрутку родительской страницы при прокрутке внутри диалогового окна?

Я создал модальное диалоговое окно, используя следующий код. 

// Dialog
$('#dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 550,
    minHeight: 500,
    maxHeight: 800,
    minWidth: 500,
    maxWidth: 900,
    modal: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$('#AddNewItems').click(function () {
    var currentURL = getURLOfCurrentPage();
    $('#dialog').dialog('open');
    $("#dialog").dialog("option", "width", 800);
    $("#dialog").dialog("option", "height", 550);
    $("#dialog").dialog( "option", "draggable", false );
    $("#dialog").dialog( "option", "modal", true );
    $("#dialog").dialog( "option", "resizable", false );
    $('#dialog').dialog("option", "title", 'My Title');
    $("#modalIframeId").attr("src", "http://myUrl");
    return false;
});

Ответы [ 3 ]

22 голосов
/ 16 сентября 2010

Вот что я использую: 

$('#dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 550,
    minHeight: 500,
    maxHeight: 800,
    minWidth: 500,
    maxWidth: 900,
    modal: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open: function(){
        $("body").css("overflow", "hidden");
    },
    close: function(){
        $("body").css("overflow", "auto");
    }
});
2 голосов
/ 03 августа 2010

Нечто подобное может работать (это не проверено): 

<script type="text/javascript" language="Javascript">
    var stop_scroll = false;
    function scrolltop(){
        if(stop_scroll == true){
            scroll(0,0);
            // Or window.scrollTo(0,0);
        }
    }
</script>

В вашем теле тег (<body></body>) 

<body onscroll="scrolltop();" >

Наконец, установите stop_scroll в значение true, когда вы открываете диалог, и значение false, когда вы закрываете его.

1 голос
/ 10 января 2013
Решение

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

Следующий код будет обрабатывать открытие и закрытие всех диалогов: 

$('body').on('dialogopen', '.ui-dialog-content', function () {
    var $dialog = $(this);
    var $body = $('body');
    var height = $body.height();

    // Hide the main scrollbar while the dialog is visible. This will prevent the main window
    // from scrolling if the user reaches the end of the dialog's scrollbar.
    $body.css('overflow', 'hidden');

    // Calling resize on the dialog so that the overlay is resized for the scrollbars that are now hidden.
    $dialog.resize().on('dialogclose', function () {
        // Show the main scrollbars and unbind the close event handler, as if the
        // dialog is shown again, we don't want the handler to fire multiple times.
        $body.css('overflow', 'auto');
        $dialog.off('dialogclose');
    });
});

Я использую jQuery v1.8.23. Я проверял это в Internet Explorer 8, Internet Explorer 9, Firefox 17 и Chrome 19.

...