1

アプリでポップアップメニューを作成しましたが、ポップアップメニューを開いてページをスクロールすると、data-dismissible="false" を使用しようとしてもポップアップメニューもページとともにスクロールアップしますが、まだ何も起こりません問題は同じままです。前もって感謝します。

4

3 に答える 3

2

この問題を簡単に解決する方法があります。ポップアップがアクティブなときにページのスクロールを防止するだけです。

作業jsFiddle例: http://jsfiddle.net/Gajotres/aJChc/

これを機能させるには、ポップアップに属性が必要です。data-dismissible="false"これにより、ポップアップの外側をクリックしたときにポップアップが閉じられなくなります。別の属性を使用できます:data-overlay-theme="a"ポップアップ オーバーレイ div に色を付けます。これは、ポップアップが開いたときに画面を覆い、ポップアップが閉じないようにする DIV です。

そして、この JavaScript は考えられるすべてのポップアップで動作します:

$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','auto');
});
于 2013-07-03T08:28:24.443 に答える
1

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

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

それが役に立てば幸い！

于 2013-11-04T12:15:55.703 に答える
0

ボディのスクロールが妨げられない場合は、以下を試してください。私の場合、boilerplate.css を使用していたので、ボディのスクロールを防止できませんでした。

 popupafteropen: function (e) {
               $('html').css('overflow', 'hidden');
            },
            popupafterclose: function (e) {
                $('html').css('overflow', 'auto');              
            }
于 2013-12-26T10:44:15.920 に答える