Finestra di dialogo dell'interfaccia utente jQuery - La finestra esterna scorre mentre scorre all'interno della finestra di dialogo

Sto usando una finestra di dialogo jQuery UI per mostrare un popup contenente una pagina. Quando scorro all'interno del popup e se le barre di scorrimento arrivano in fondo, la pagina padre inizia a scorrere. Come posso limitare lo scorrimento della pagina padre durante lo scorrimento all'interno della finestra di dialogo?Finestra di dialogo dell'interfaccia utente jQuery - La finestra esterna scorre mentre scorre all'interno della finestra di dialogo

Ho creato una finestra di dialogo modale utilizzando il seguente codice.

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

fonte

2010-08-03 NLV

Questo è quello che uso: soluzione

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

fonte

2010-09-16 16:17:59 gurun8

Sì. Questo funziona. Questo è esattamente quello che ho fatto. – NLV

Che bella idea. Non ho mai pensato di nascondere il troppo pieno del corpo in quel modo. Molto bene! –

semplicemente geniale –

Qualcosa di simile potrebbe funzionare (questo è testato):

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

Nel vostro tag body (<body></body>)

<body onscroll="scrolltop();" >

scorso, impostato stop_scroll su true quando si apre il dialogo e falso quando lo chiudi.

fonte

2010-08-03 15:40:44

Grazie. Lasciami fare un tentativo. – NLV

Grazie. Funziona alla grande. Ma Scroll (0,0) sta dando un comportamento nervoso e tremolante. Non posso chiamare qualcosa come preventDefault() e cancellare l'evento? – NLV

Non penso che tu possa (qualcuno può correggermi se sbaglio). Credo che l'evento venga chiamato solo quando il rotolo è iniziato, non prima che accada. Ecco perché stiamo spostando la posizione di scorrimento su (0,0). Si è già trasferito prima di entrare nel nostro evento. Sono contento che tu l'abbia trovato utile comunque. –

di gurun8 ha funzionato meglio per me. Tuttavia, avevo bisogno di un modo per farlo a livello globale. La mia applicazione utilizza finestre di dialogo su più pagine e non volevo aggiornare tutte le istanze.

Il seguente codice gestirà l'apertura e la chiusura di tutte le finestre di dialogo:

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

Sto usando jQuery v1.8.23. Ho provato questo in Internet Explorer 8, Internet Explorer 9, Firefox e Chrome 17 19.

fonte

2013-01-10 11:25:10

Io uso questo con un paio di modifiche. Innanzitutto, afferro il 'padding 'del corpo a destra e lo metto alla larghezza della barra di scorrimento (subito dopo aver cambiato l'overflow in hidden). Ciò impedisce alla pagina di spostarsi sullo sfondo, che è disorientante. Alla fine della finestra di dialogo, ripristino 'padding-right'. In secondo luogo, prima di fare qualsiasi cosa, collaudo se il 'overflow' del corpo è già' nascosto ', e in tal caso non faccio nulla. Questo può accadere se due finestre di dialogo vengono aperte contemporaneamente. –

Finestra di dialogo dell'interfaccia utente jQuery - La finestra esterna scorre mentre scorre all'interno della finestra di dialogo

risposta

Problemi correlati