jQueryのポップアップウィンドウの下のページの下にスライド禁止効果を実装する方法

プロジェクトの開発プロセス中、特にモバイル端末では、ポップアップ ウィンドウを含むページに遭遇することがよくあります。この記事では、ポップアップ ウィンドウの下の下部ページのスライドを無効にする効果を jQuery がどのように実装するかを共有します。必要な友人はそれを参照してください

プロジェクト開発の過程で、私たちはよくページに遭遇します。特にモバイル端末では、ポップアップ ウィンドウを使用します。特別な要件がなければ、ポップアップ ウィンドウが表示された後も、ポップアップ ウィンドウの下の一番下のページをスライドさせることができます。より良いユーザー エクスペリエンスを実現するには、ポップアップ ウィンドウが閉じられたときに、ポップアップ ウィンドウの下部にあるページがスライドしないようにする必要があります。ポップアップ ウィンドウのスライドが再開されます。 具体的なアイデアは次のとおりです。

1. ポップアップ ウィンドウがトリガーされると、バーの位置がスクロールされます。

2. 下部ページの位置属性を固定に設定します。

3. ポップアップウィンドウがトリガーされたときの下部ページの位置を初期位置に設定します。

4. ポップアップウィンドウを閉じると、一番下のページの位置属性が復元されます。

5. 下部ページのスクロールバーの高さを元に戻します。

//触发弹窗底部页面禁止滑动
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,设置滚动条的位置
}

ポップアップ ウィンドウがトリガーされたときに fix() メソッドを実行し、ポップアップ ウィンドウが閉じられたときに fix_cancel() メソッドをトリガーすると、ユーザー エクスペリエンスが向上します。

上記は私があなたのためにまとめたものです。

関連記事:

Webpack+Babel+React環境構築の詳細解説(詳細チュートリアル)

webpack+vue2を使ったプロジェクト構築

Webpack Babel関連の設定の詳細解釈(詳細チュートリアル)

webpack の vue プロジェクト リソース ファイルに関する 404 の問題を報告する (詳細なチュートリアル)

vux を vue.js に統合してプルアップ読み込みとプルダウン更新を実装する方法

Gulp を使用して静的メソッドを実装する方法Webページのモジュール化は具体的にどうやって行うのでしょうか？

jsを使用してWeChatを実装し、Alipayを呼び出して赤い封筒を受け取るようにする（詳細なチュートリアル）

履歴を使用してreact-routerでルーティングを制御する方法（詳細なチュートリアル）

vue-ssrを使用して次のことを行う方法サーバーサイドレンダリングの実装

Vue2.0の親コンポーネントと子コンポーネント間のディスパッチ機構の実装について(詳細チュートリアル)

SpringMVC_jqueryでのjQuery + チェックボックスの選択と値の受け渡し例

値の取得方法SpringMVC のポスト内の複数選択ボックスの値 (コード例)

以上がjQueryのポップアップウィンドウの下のページの下にスライド禁止効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。