So erzielen Sie den Deaktivierungseffekt für die untere Seite unter dem Popup-Fenster in jQuery

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?

Verwenden Sie js, um WeChat zu implementieren, um Alipay zum Erhalt roter Umschläge zu veranlassen (ausführliches Tutorial)

So verwenden Sie den Verlauf, um das Routing in React- zu steuern. Router (ausführliches Tutorial)

So implementieren Sie serverseitiges Rendering mit vue-ssr

Über die Implementierung des Versandmechanismus zwischen Vue2. 0 übergeordnete und untergeordnete Komponenten (ausführliches Tutorial)

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!