国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

モーダルが開いているときにスクロールを無効にする方法 - フルページ JS
P粉090087228
P粉090087228 2023-08-18 00:15:20
0
1
737
<p>私がやりたいのは、モーダルが開いているときにページ全體の JavaScript スクロールを無効にすることです。問題は、モーダルを開いてスクロールしようとすると、実際の Web ページであるコンテンツがモーダルの背後に移動するため、これを無効にしたいということです。モーダルを開いたとき、背景は固定されているはずです。 </p> <pre class="brush:php;toolbar:false;"><div id="fullpage"> <div class="セクション"> <?php include './home-page/home-page-manufacturing-list.php';?> <button id="turnOff" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">モーダル ボックスを開く</button> </div> </div> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="closeModal('modal01')" class="w3-button w3-display-topright">&times;</span> <div class="コンテナ背景フィルター"> <div class="行"> <div class="col-12"> <h3 class="セクションタイトル"></h3> </div> <div class="col-12"> <h5>當(dāng)社では木工に対する情熱を持っており、それはすべての製造およびインテリア デザイン プロジェクトに反映されています。當(dāng)社は、機能的でありながら美しいカスタム木製家具、備品、アクセントの作成を?qū)熼Tとしています</h5> </div> </div> </div> </div> </div> </div> <スクリプト> $(document).ready(function() { var isModalOpen = false; // モーダルが開いているときに FullPage.js のスクロールを無効にする 関數(shù) disableFullPageScroll() { $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setKeyboardScrolling(false); } // モーダルが閉じているときに FullPage.js のスクロールを有効にする 関數(shù)enableFullPageScroll() { $.fn.fullpage.setAllowScrolling(true); $.fn.fullpage.setKeyboardScrolling(true); } //モーダルボックスを開く 関數(shù) openModal(modalId) { document.getElementById(modalId).style.display = 'ブロック'; isModalOpen = true; disableFullPageScroll(); } // モーダルボックスを閉じます 関數(shù) closeModal(modalId) { document.getElementById(modalId).style.display = 'none'; isModalOpen = false; EnableFullPageScroll(); } // モーダルを開いたり閉じたりするためのボタンのクリック イベントを処理します $('#openModalButton').on('click', function() { openModal('id01'); // 'id01' をモーダルの ID に置き換えます }); $('#closeModalButton').on('click', function() { closeModal('id01'); // 'id01' をモーダルの ID に置き換えます }); // スクロールイベントを処理する $(ウィンドウ).on('スクロール', 関數(shù)(イベント) { if (isModalOpen) { イベント.preventDefault(); イベント.stopPropagation(); } }); }); </script></pre>
P粉090087228
P粉090087228

全員に返信(1)
P粉805535434

あなたが提供したコードは、モーダルを開いたときにスクロールを無効にするのが正しいようです。ただし、問題の原因はいくつか考えられます:

  1. モーダル ボックスを開くボタンは、スクリプトで定義した openModal 関數(shù)を使用しません。代わりに、モーダルのスタイルを直接操作します。これは、isModalOpen 変數(shù)が true に設(shè)定されておらず、disableFullPageScroll 関數(shù)が呼び出されないことを意味します。この問題を解決するには、ボタンがクリックされたときに openModal 関數(shù)を使用する必要があります。
  2. リーリー
    モーダル ボックスを閉じる
  1. タグは、closeModal 関數(shù)を使用しません。次のようになります:
  2. リーリー
  1. closeModal関數(shù)はグローバル スコープで定義されていませんが、HTML から呼び出されます。これによりエラーが発生する可能性があります。この問題を解決するには、グローバル スコープで closeModal 関數(shù)を定義する必要があります:
  2. リーリー
  1. disableFullPageScroll 関數(shù)と enableFullPageScroll 関數(shù)は、FullPage.js メソッドを使用してスクロールを無効または有効にします。 FullPage.js を使用していない場合、または正しく初期化されていない場合、これらのメソッドは機能しません。 FullPage.js がプロジェクトに含まれており、正しく初期化されていることを確認(rèn)する必要があります。

  2. スクロール イベント ハンドラーの

    preventDefault メソッドと stopPropagation メソッドは、すべての場合にスクロールを防ぐのに十分ではない可能性があります。モーダルが開いているときは overflow

    スタイルを hidden に設(shè)定し、モーダルが閉じているときは auto にリセットすることもできます : リーリー
  3. これらの提案を試して、問題が解決したかどうかをお知らせください。
最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート