Fangen wir an
In verschiedenen Kriterien und Qualitätsmanifesten gibt es ein Element wie das Blockieren des Bildlaufs, wenn ein modales Fenster geöffnet ist. Ein modales Fenster impliziert nur die Interaktion mit ihm.
Viele werden die Frage stellen: „Warum nicht fertige Lösungen verwenden?“. Das Problem ist, dass diese Funktionalität entweder gar nicht oder nur sehr schlecht implementiert ist. Sie können die einfachste und schlechteste Lösung verwenden:
.body { overflow: hidden;}
Hier bekommen wir ein leichtes Zucken der Seite.
Code Es ist erwähnenswert, dass das Problem nur auftritt, wenn das Scrollen auf der Seite stattfindet. In Safari gibt es ein solches Problem beispielsweise nicht.
Einige Lösungen in den offenen Bereichen von npm bieten das Ersetzen eines Bildlaufs durch einen Einzug oder Block, der als Bildlauf (ein einfacher grauer Balken) gestaltet ist, viel Magie, aber sie beheben das Problem nicht.
Wir werden den anfänglichen Code ein wenig optimieren und alles funktioniert:
.body { position:fixed; overflow-y: scroll; }
Nun ist ein weiteres Problem aufgetreten: Die Seite springt hoch.
Code Die Lösung durch js ist einfach: Wenn Sie die Seite öffnen, nehmen Sie den Wert, zu dem die Seite gescrollt wird, und setzen Sie diesen Wert auf die Eigenschaft
top des <body>
-Code- Tags.
function getBodyScrollTop() { return self.pageYOffset || (document.documentElement && document.documentElement.ScrollTop) || (document.body && document.body.scrollTop); } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop()
Manchmal gibt es auf der Website eine Seite mit wenig Inhalt und ohne Bildlauf. Wenn Sie jedoch ein modales Fenster öffnen, wird es durch unseren Code hinzugefügt. Lassen Sie uns die Schriftrolle ein wenig modifizieren.
Fertige Lösung .
function existVerticalScroll() { return document.body.offsetHeight > window.innerHeight } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() modal.classList.add('modal--open') if(existVerticalScroll()) {
Verfügbarkeit
Wenn Sie nicht darüber nachdenken, wird möglicherweise eine Bewegung über eine Registerkarte außerhalb des Modalfensters ausgeführt. Drücke auf gif einfach
ein paar Mal die
Tabulatortaste .
Im Internet gibt es keine einfache Lösung für dieses Problem, und das Schreiben Ihres
Krückenfahrrads ist nicht sehr rational, wenn es eine
focus-trap.js-Bibliothek gibt .
Hier ging der Autor näher auf das Thema Bibliotheken und deren Probleme ein .
Zusammenfassung
Selbst wenn die Seite mehrere modale Fenster enthält, können Sie den gesamten Code in eine Funktion einschließen und den Klassennamen des modalen Fensters übergeben.
function initModal(className) {
Das Problem ist auf den ersten Blick einfach, aber es gibt so viele nicht offensichtliche Momente. Ich denke, dieser Artikel wird Ihnen helfen, bessere modale Fenster zu erstellen.
Bereit CodeNützliche Materialien