Während des Projektentwicklungsprozesses stoßen wir häufig auf Seiten mit Popup-Fenstern, insbesondere auf dem mobilen Endgerät. In diesem Artikel werde ich mit Ihnen teilen, wie jQuery das Verschieben auf der unteren Seite unter dem Popup-Fenster deaktiviert. Freunde, die es benötigen, können darauf verweisen.
Während des Projektentwicklungsprozesses stoßen wir häufig auf Seiten mit Pop-up-Fenster, insbesondere auf Mobiltelefonen. Wenn keine besonderen Anforderungen vorliegen, kann die untere Seite unter dem Popup-Fenster nach dem Öffnen des Popup-Fensters immer noch verschoben werden. Um ein besseres Benutzererlebnis zu erzielen, muss verhindert werden, dass die Seite am unteren Rand des Popup-Fensters verschiebt, wenn das Popup-Fenster geschlossen wird Das Popup-Fenster wird wie folgt verschoben:
1. Ermitteln Sie die Position des Popup-Fensters.
2. Setzen Sie das Positionsattribut der unteren Seite auf „Fest“.
3. Stellen Sie die Position der unteren Seite auf die Anfangsposition ein, wenn das Popup-Fenster ausgelöst wird.
4. Stellen Sie beim Schließen des Popup-Fensters das Positionsattribut der unteren Seite wieder her.
5. Stellen Sie die Höhe der Bildlaufleiste der unteren Seite wieder her.
//触发弹窗底部页面禁止滑动 function fixed(){ var scrollTop = document.body.scrollTop;//设置背景元素的位置 $('#content').attr('data-top',scrollTop); var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称 contentStyle.position = 'fixed'; //contentStyle是第二步的变量,设置背景元素的position属性为‘fixed' contentStyle.top = "-"+scrollTop+"px"; } //关闭弹窗底部页面恢复滑动 function fixed_cancel(){ var contentStyle = document.getElementById("content").style; var scrollTop = $('#content').attr('data-top');//设置背景元素的位置 contentStyle.top = '0px';//恢复背景元素的初始位置 contentStyle.position ="static";//恢复背景元素的position属性(初始值为absolute,就恢复为absolute,以此类推) $(document).scrollTop(scrollTop);//scrollTop,设置滚动条的位置 }
Führen Sie die Methode „fixed()“ aus, wenn das Popup-Fenster ausgelöst wird. Lösen Sie die Methode „fixed_cancel()“ aus, wenn das Popup-Fenster geschlossen wird.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Detaillierte Antworten zum Aufbau einer Webpack+Babel+React-Umgebung (ausführliches Tutorial)
Verwenden Sie Webpack+vue2 für Projekte Konstruktion
Detaillierte Interpretation der relevanten Konfiguration von Webpack Babel (detailliertes Tutorial)
Meldung von 404 Problemen bezüglich Vue-Projektressourcendateien in Webpack (detailliert). Tutorial)
Wie man Vux in vue.js integriert, um Pull-Up-Laden und Pull-Down-Aktualisierung zu erreichen
Wie man Gulp dazu verwendet Wie kann ich die statische Webseitenmodularisierung konkret umsetzen?
So verwenden Sie den Verlauf, um das Routing in React- zu steuern. Router (ausführliches Tutorial)
So implementieren Sie serverseitiges Rendering mit vue-ssr
Beispiel für die Auswahl von Kontrollkästchen und die Wertübergabe in jQuery+SpringMVC_jquery
So erhalten Sie den Wert von der Multi-Select-Box-Wert im Beitrag in SpringMVC (Codebeispiel)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Deaktivierungseffekt für die untere Seite unter dem Popup-Fenster in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!