Empêcher Le Défilement De L'Arrière-Plan Lors De L'Affichage De Popup
j'ai un formulaire qui s'affiche dans une fenêtre popup. Après le chargement, le fond est gris, mais l'utilisateur peut faire défiler le fond du contenu de haut et de bas.
Comment puis-je empêcher le fond de défiler?
le lien' email this quote ' à droite de la capture d'écran pdf.
Merci! Joe
4 réponses
une option est de définir temporairement le overflow propriété hiddenbody, qui permettra de se débarrasser des barres de défilement, mais provoque un petit scintillement lorsque la page est modifié.
l'autre choix est de puiser dans le $(window).scroll() événement et renvoie la valeur false à partir de là. Cela provoquera aussi un peu de clignotement car le navigateur ne réagit pas aussi vite à la fausse déclaration de retour.
Votre meilleur pari est de déplacer votre cliquez sur gestionnaires d'événements dans un fichier séparé et de faire la liaison il y a:
$(function() {
$('.emailPost').click(function() {
$(window).scroll(function() { return false; });
pageTracker._trackPageview('/onclick/emailquote');
});
});
cela devrait empêcher une page de défiler. N'oubliez pas de supprimer le lien après la fermeture de la boîte de dialogue, sinon la page ne sera plus scrollable! Vous pouvez supprimer les lie à l'aide de:
$(window).unbind('scroll');
cacher la barre de défilement du corps lors de l'ouverture du popup
document.body.style.overflow = "hidden";
et revenir en arrière lors de la fermeture du popup
document.body.style.overflow = "visible";
N'utilisez pas la balise # dans vos liens!
Il va essayer de faire défiler jusqu'à l'ancre # mais parce qu'il est vide il va se défiler vers le haut de la page.
modifiez vos liens vers:
<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>
(notez le href="")
ce bloc de code fonctionne pour les appareils mobiles IOS où la question du parchemin est très courante.
$('body').on('touchmove', function(e) {
if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
$(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
$(this).removeClass('scroll-disable');
});