Boîte de dialogue jQuery UI - La fenêtre externe défile tout en faisant défiler la boîte de dialogue

J'utilise une boîte de dialogue jQuery UI pour afficher une fenêtre contenant une page. Lorsque je fais défiler la fenêtre contextuelle et que les barres de défilement arrivent en bas, la page parente commence à défiler. Comment puis-je empêcher la page parente de défiler tout en faisant défiler la boîte de dialogue?Boîte de dialogue jQuery UI - La fenêtre externe défile tout en faisant défiler la boîte de dialogue

J'ai créé une boîte de dialogue modale en utilisant le code suivant.

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

Source

2010-08-03 NLV

C'est ce que j'utilise:

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

Source

2010-09-16 16:17:59 gurun8

Oui. Cela marche. C'est exactement ce que j'ai fait. – NLV

Quelle bonne idée. Jamais pensé à cacher le débordement du corps comme ça. Bien joué! –

simplement brillant –

Quelque chose comme cela pourrait fonctionner (ce qui est non testé):

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

Dans votre balise body (<body></body>)

<body onscroll="scrolltop();" >

dernier, mis stop_scroll à true lorsque vous ouvrez le dialogue et faux quand vous le fermez.

Source

2010-08-03 15:40:44

Merci. Laissez-moi essayer. – NLV

Merci. Cela fonctionne très bien. Mais Scroll (0,0) donne un comportement sautillant et scintillant. Puis-je appeler quelque chose comme preventDefault() et annuler l'événement? – NLV

Je ne pense pas que vous pouvez (quelqu'un peut me corriger si je me trompe). Je crois que l'événement n'est appelé que lorsque le défilement a commencé, pas avant qu'il ne se produise. C'est pourquoi nous ramenons la position de défilement à (0,0). Il a déjà déménagé avant que nous entrions dans notre événement. Je suis content que vous l'ayez trouvé utile. –

solution de gurun8 fonctionne le mieux pour moi. Cependant, j'avais besoin d'un moyen de le faire globalement. Mon application utilise des boîtes de dialogue sur plusieurs pages et je ne voulais pas mettre à jour toutes les instances.

Le code suivant traitera l'ouverture et la fermeture de toutes les boîtes de dialogue:

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

J'utilise jQuery v1.8.23. Je l'ai testé cela dans Internet Explorateur 8, Internet Explorateur 9, Firefox et Chrome 17 19.

Source

2013-01-10 11:25:10

Je l'utilise avec quelques modifications. D'abord, j'attrape le 'padding-right' du corps et le règle sur la largeur de la barre de défilement (juste après avoir changé le débordement en caché). Cela empêche la page de se déplacer en arrière-plan, ce qui est désorientant. Sur le dialogue, je ferme le 'padding-right'. Deuxièmement, avant de faire quoi que ce soit, je teste si le 'overflow 'du corps est déjà' caché', et si c'est le cas, je ne fais rien. Cela peut arriver si deux boîtes de dialogue sont ouvertes à la fois. –

Boîte de dialogue jQuery UI - La fenêtre externe défile tout en faisant défiler la boîte de dialogue

Répondre

Questions connexes