wake-up-neo.net

Verhindern des Hintergrunds beim Anzeigen des Popups

Ich habe ein Formular, das in einem Popup angezeigt wird. Nach dem Laden ist der Hintergrund ausgegraut, der Benutzer kann jedoch weiterhin den Hintergrundinhalt nach oben und unten scrollen. 

Wie kann ich verhindern, dass der Hintergrund scrollt? 

Beispiel hier

klicken Sie auf den Link "E-Mail dieses Angebot" rechts neben dem PDF-Screenshot.

21
Joe

Eine Option besteht darin, die overflow-Eigenschaft vorübergehend auf hidden für body zu setzen. Dadurch werden die Bildlaufleisten zwar gelöscht, aber beim Anpassen der Seite ein kleines Flimmern verursacht.

Die andere Möglichkeit besteht darin, auf das Ereignis $(window).scroll() zu tippen und von dort false zurückzugeben. Dies führt auch zu einem Flimmern, da der Browser nicht so schnell auf die Anweisung return false reagiert.

Am besten verschieben Sie Ihre Click-Event-Handler in eine separate Datei und nehmen dort die Bindung vor:

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

Das sollte das Blättern einer Seite verhindern. Vergessen Sie nicht, die Bindung zu entfernen, nachdem der Dialog geschlossen wurde. Andernfalls kann die Seite nicht mehr scrollbar sein! Sie können Bindungen entfernen mit:

$(window).unbind('scroll');
17
Tatu Ulmanen

So blenden Sie die Bildlaufleiste des Körpers aus, wenn Sie das Popup-Fenster öffnen

document.body.style.overflow = "hidden";

und zurückkehren, wenn Sie das Popup schließen

document.body.style.overflow = "visible";
27
sudhAnsu63

Dieser Codeblock funktioniert für IOS mobile Geräte, bei denen das Bildlaufproblem häufig auftritt.

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

Verwenden Sie nicht das # -Tag in Ihren Links!

Es wird versucht, zum Anker # zu scrollen, aber da es leer ist, wird es an den Anfang der Seite verschoben.

Bearbeiten Sie Ihre Links zu:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(beachte die href = "")

0
Farlock85