jQuery UI iletişim kutusu - İletişim penceresi içinde gezinirken dış pencere kaydırılır

Bir sayfa içeren bir pop-up görüntülemek için jQuery UI iletişim kutusunu kullanıyorum. Açılır pencerenin içinde kaydırdığımda ve kaydırma çubukları en alta geldiğinde, üst sayfa kaydırmaya başlar. İletişim kutusunun içinde gezinirken ana sayfanın kaymasını nasıl engelleyebilirim?jQuery UI iletişim kutusu - İletişim penceresi içinde gezinirken dış pencere kaydırılır

Aşağıdaki kodu kullanarak kalıcı bir iletişim kutusu oluşturdum. Böyle

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

kaynak

2010-08-03 NLV

Bu kullandığım budur:

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

kaynak

2010-09-16 16:17:59 gurun8

Yep. Bu çalışıyor. Tam olarak yaptığım bu. – NLV

Ne harika bir fikir. Vücudun taşmasını asla böyle düşünmemiştim. Aferin! –

sadece parlak –

şey (bu test edilmedi) işe yarayabilecek: Eğer diyalog açtığınızda vücudunuzun etiketinde

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

Son true stop_scroll set ve kapattığınızda yanlış.

kaynak

2010-08-03 15:40:44

sayesinde bu test etti. Bir deneyeyim. – NLV

Teşekkür ederim. Harika çalışıyor. Ancak Scroll (0,0), sarsıcı ve titrek bir davranış veriyor. PreventDefault() gibi bir şeyi arayabilir ve etkinliği iptal edemez miyim? – NLV

Yapabileceğinizi sanmıyorum (eğer yanılıyorsam beni düzeltebilir). Olayın yalnızca kaydırma başladığında değil, gerçekleşmeden önce çağrıldığına inanıyorum. Bu yüzden kaydırma pozisyonunu tekrar (0,0) konumuna getiriyoruz. Etkinliğimize girmeden önce zaten taşındı. Yine de yararlı bulduğuna sevindim. –

gurun8 çözümü benim için en iyi çalıştı. Ancak, bunu küresel olarak yapmanın bir yoluna ihtiyacım vardı. Uygulamam, birden çok sayfada iletişim kutuları kullanıyor ve tüm örnekleri güncellemeyi istemedim.

Aşağıdaki kod tüm diyaloglar açılıp kapanmasını idare edecek: Ben jQuery v1.8.23 kullanıyorum

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

. Internet Explorer 8, Internet Explorer 9, Firefox 17 ve Chrome 19.

kaynak

2013-01-10 11:25:10

Bunu bir çift değişiklikle kullanıyorum. Birincisi, vücudun 'padding-right 'kısmını yakaladım ve bunu scrollbarın genişliğine ayarladım (overflow'u gizli olarak değiştirdikten hemen sonra). Bu, sayfanın arka planda kaymasını engeller, bu da dikkati dağıtmadır. Kapat iletişim kutusunda 'padding-right '' i döndürüyorum. İkincisi, bir şey yapmadan önce, vücudun “taşması” nın zaten “gizli” olup olmadığını test ederim ve eğer öyleyse hiçbir şey yapmam. Bu, iki iletişim kutusu aynı anda açılmışsa gerçekleşebilir. –

jQuery UI iletişim kutusu - İletişim penceresi içinde gezinirken dış pencere kaydırılır

cevap

İlgili konular