Hộp thoại giao diện người dùng jQuery - Cuộn ngoài cửa sổ trong khi cuộn bên trong hộp thoại

Tôi đang sử dụng hộp thoại jQuery UI để hiển thị cửa sổ bật lên có chứa trang. Khi tôi cuộn bên trong cửa sổ bật lên và nếu các thanh cuộn đến dưới cùng, trang gốc sẽ bắt đầu cuộn. Làm thế nào tôi có thể hạn chế trang gốc khi cuộn trong khi cuộn bên trong hộp thoại?Hộp thoại giao diện người dùng jQuery - Cuộn ngoài cửa sổ trong khi cuộn bên trong hộp thoại

Tôi đã tạo một hộp thoại phương thức bằng cách sử dụng mã sau.

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

Nguồn

2010-08-03 NLV

Đây là những gì tôi sử dụng: giải pháp

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

Nguồn

2010-09-16 16:17:59 gurun8

Đúng. Những công việc này. Đây chính xác là những gì tôi đã làm. – NLV

Thật là một ý tưởng tuyệt vời. Không bao giờ nghĩ để che giấu dòng chảy của cơ thể như thế. Làm tốt! –

chỉ đơn giản là rực rỡ –

Something như thế này có thể làm việc (điều này là chưa được kiểm tra):

<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>

Trong thẻ cơ thể bạn (<body></body>)

<body onscroll="scrolltop();" >

ngoái, thiết stop_scroll true khi bạn mở đối thoại và sai khi bạn đóng nó.

Nguồn

2010-08-03 15:40:44

Cảm ơn. Hãy để tôi thử. – NLV

Cảm ơn bạn. Nó hoạt động rất tốt. Nhưng Scroll (0,0) đang tạo ra một hành vi lộn xộn và nhấp nháy. Tôi không thể gọi một cái gì đó như preventDefault() và hủy bỏ sự kiện? – NLV

Tôi không nghĩ rằng bạn có thể (ai đó có thể sửa tôi nếu tôi sai). Tôi tin rằng sự kiện này chỉ được gọi khi cuộn đã bắt đầu, không phải trước khi nó xảy ra. Đó là lý do tại sao chúng tôi đang di chuyển vị trí cuộn trở lại (0,0). Nó đã di chuyển trước khi chúng tôi bước vào sự kiện của chúng tôi. Rất vui khi bạn thấy nó hữu ích mặc dù. –

gurun8 của làm việc tốt nhất cho tôi. Tuy nhiên, tôi cần một cách để làm điều này trên toàn cầu. Ứng dụng của tôi đang sử dụng hộp thoại trên nhiều trang và tôi không muốn cập nhật tất cả các phiên bản.

Các mã sau sẽ xử lý sự đóng mở của tất cả các hộp thoại:

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

Tôi đang sử dụng jQuery v1.8.23. Tôi đã thử nghiệm này trong Internet Explorer 8, Internet Explorer 9, Firefox 17 và Chrome 19.

Nguồn

2013-01-10 11:25:10

Tôi sử dụng điều này với một vài sửa đổi. Đầu tiên, tôi lấy 'padding-right' của cơ thể và đặt nó thành chiều rộng của thanh cuộn (ngay sau khi thay đổi overflow thành hidden). Điều này ngăn không cho trang chuyển đổi ở chế độ nền, đó là mất phương hướng. Trên hộp thoại đóng, tôi hoàn nguyên 'padding-right'. Thứ hai, trước khi làm bất cứ điều gì tôi kiểm tra nếu 'tràn' của cơ thể đã là 'ẩn', và nếu như vậy tôi không làm gì cả. Điều này có thể xảy ra nếu hai hộp thoại được mở cùng một lúc. –

Hộp thoại giao diện người dùng jQuery - Cuộn ngoài cửa sổ trong khi cuộn bên trong hộp thoại

Trả lời

Các vấn đề liên quan