4

jquery モバイル ポップアップを使用しています。これはページ内にあります。このポップアップを開くイメージがあります。ポップアップが開いている場合にのみページ全体がスクロールしないようにし、ポップアップが閉じている場合にスクロールを許可するにはどうすればよいですか?

    <a href="#settingsPopUp" data-rel="popup" data-position-to="window" data-inline="true" data-icon="gear"><img src="settings1.jpg" alt="Settings"></a>

    <br>
    <div data-role="popup" id="settingsPopUp" data-theme="a" class="ui-corner-all">
        <div style="padding:10px 20px;">
            <h3>Location Details</h3>               
        </div>          
    </div>
4

6 に答える 6

4

私にとって、この方法は機能しませんでした。ブラウザでは機能しますが、Phone Gap アプリケーションでは機能しません。だから私はこのように解決します：

$('#Popup-id').on({
   popupbeforeposition: function(){
      $('body').on('touchmove', false);
   },
   popupafterclose: function(){
      $('body').off('touchmove'); 
  }
});

それが役に立てば幸い！

于 2013-11-04T12:23:11.297 に答える
2

overflow-y: hidden;モーダルボックスが開いているときに、スクロールしたくない要素に割り当てるのはどうですか? （通常は になります<body>）

于 2013-03-11T11:39:44.603 に答える
1

以前の回答にはコメントできませんが、少し間違いがあります。次のコードは私のためにトリックをしました：

$( "#mypopup" ).popup({
  afteropen: function( e) {
   $('body').css('overflow','hidden');
  },
  afterclose: function(e) {
   $('body').css('overflow','auto');
  }
});
于 2013-09-17T18:04:54.203 に答える
0

次の 2 つの方法があります。

  1. Either "overflow:hidden" the body
  2. Or give a "position:fixed" to the popup so this will scroll in the viewport.
于 2013-03-11T11:43:22.163 に答える
0

ポップアップウィジェットにイベントを使用できます

$( "#settingsPopUp" ).popup({
  afteropen: function( event, ui ) {
   $('body').css({
       overflow:'hidden'
   });
  },
  afterclose: function( event, ui ) {
   $('body').css({
       overflow:'auto'
   });
  }
});

これは動的な解決策であり、問​​題を解決すると思います。

于 2013-03-11T12:08:15.877 に答える