ポップアップをアクティブにしたままスクロールを無効にする

Question

オンラインチュートリアル（http://uposonghar.com/popup.html）に従ってjQueryポップアップを作成しました。

jQueryに関する私の知識が低いため、自分の要件としては動作させることができません。

私の問題：

1. 私はポップアップがアクティブである間に、Webページのスクロールを無効にしたいです。
2. アクティブな状態のポップアップの背景色は、フルWebページでは機能しません。

CSS：

body { 
    background: #999; 
} 
#ac-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,.6); 
    z-index: 1001; 
} 
#popup{ 
    width: 555px; 
    height: 375px; 
    background: #FFFFFF; 
    border: 5px solid #000; 
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    box-shadow: #64686e 0px 0px 3px 3px; 
    -moz-box-shadow: #64686e 0px 0px 3px 3px; 
    -webkit-box-shadow: #64686e 0px 0px 3px 3px; 
    position: relative; 
    top: 150px; left: 375px; 
} 

はJavaScript：

<script type="text/javascript"> 
function PopUp(){ 
    document.getElementById('ac-wrapper').style.display="none"; 
} 
</script> 

HTML：

<div id="ac-wrapper"> 
    <div id="popup"> 
    <center> 
    <p>Popup Content Here</p> 
    <input type="submit" name="submit" value="Submit" onClick="PopUp()" /> 
    </center> 
    </div> 
</div> 

<p>Page Content Here</p> 

Answer 1

簡単な答えは、使用可能性があり、固定あなた#ac-wrapperの位置を設定することですスクロールイベントを停止する必要はありません：私は、以下のCSSを使用しました。

#ac-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,.6); 
    z-index: 1001; 
} 

これは常に表示ポップアップのコンテナを維持します（トップ整列 - 左）が、まだスクロールできるようになります。

しかし、ポップアップを開いてページをスクロールするのは悪いです！

なぜなら、あなたのポップアップがフルスクリーンでも半透明でもないと、ポップアップの後ろにコンテンツスクロールが表示されるからです。それに加えて、ポップアップを閉じると、ページ上の別の位置に表示されます。

ソリューションはあなたにも、基本的にこれらの規則で体にクラスを追加するには、このポップアップを表示するには、JavaScriptでclickイベントをバインドする際に、ということである：

.my-body-noscroll-class { 
    overflow: hidden; 
} 

その後、トリガすることによりポップアップを閉じるとき何らかのアクションやクリックを解除するだけで、クラスを再度削除し、ポップアップが閉じられた後にスクロールを許可します。

ポップアップが開いている間にユーザーがスクロールすると、ドキュメントはスクロールしません。ユーザーがポップアップを閉じると、スクロールが再び利用可能になり、ユーザーは彼が中断したところで続けることができます:)

Answer 2

スクロールバーを無効にするには：

$('body').css('overflow', 'hidden'); 

これは、スクロールバー

背景フェード-ものを隠します：

私もバックグラウンドを持っている私自身のポップアップ・ダイアログ・ウィジェットを作成しました。

div.modal{ 
    position: fixed; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 9998; 
    background-color: #000; 
    display: none; 
    filter: alpha(opacity=25); /* internet explorer */ 
    -khtml-opacity: 0.25; /* khtml, old safari */ 
    -moz-opacity: 0.25; /* mozilla, netscape */ 
    opacity: 0.25; /* fx, safari, opera */ 
} 

Answer 3

私は同様の問題がありました。 「ポップアップ」divが表示されている間に垂直スクロールを無効にしたい

bodyのオーバーフロープロパティを変更すると、ドキュメントの幅が混乱することがあります。

これを解決するためにjqueryを使用し、スクロールバーのプレースホルダを使用しました。 これはscrollイベントに結合することなく行われていた、エルゴこれはあなたのスクロールバーの位置を変更したり、:)ちらつきが発生しません

HTML：

<div id="scrollPlaceHolder"></div> 

CSS：

body,html 
{ 
    height:100%; /*otherwise won't work*/ 
} 
#scrollPlaceHolder 
{ 
    height:100%; 
    width:0px; 
    float:right; 
    display: inline; 
    top:0; 
    right: 0; 
    position: fixed; 
    background-color: #eee; 
    z-index: 100; 
} 

のjQuery：

function DisableScrollbar() 
{ 
    // exit if page can't scroll 
    if($(document).height() == $('body').height()) return; 

    var old_width = $(document).width(); 
    var new_width = old_width; 

    // ID's \ class to change 
    var items_to_change = "#Banner, #Footer, #Content"; 

    $('body').css('overflow-y','hidden'); 

    // get new width 
    new_width = $(document).width() 

    // update width of items to their old one(one with the scrollbar visible) 
    $(items_to_change).width(old_width); 

    // make the placeholder the same width the scrollbar was 
    $("#ScrollbarPlaceholder").show().width(new_width-old_width); 

    // and float the items to the other side. 
    $(items_to_change).css("float", "left"); 

} 

function EnableScrollbar() 
{ 
    // exit if page can't scroll 
    if ($(document).height() == $('body').height()) return; 

    // remove the placeholder, then bring back the scrollbar 
    $("#ScrollbarPlaceholder").fadeOut(function(){   
     $('body').css('overflow-y','auto'); 
    }); 
} 

これが役に立ちます。

Answer 4

私は同じ問題があり、それを取り除く方法を見つけました。ポップアップする要素のtouchmoveで伝播を止めなければなりません。私にとっては、画面に表示されたフルスクリーンのメニューで、スクロールできなかったので、今できることです。

$(document).on("touchmove","#menu-left-toggle",function(e){ 
    e.stopPropagation(); 
}); 

Answer 5

スクロールバーを無効にして有効にするためのコードの下に使用してください。

Scroll = (
    function(){ 
      var x,y; 
     function hndlr(){ 
      window.scrollTo(x,y); 
      //return; 
      } 
      return { 

       disable : function(x1,y1){ 
        x = x1; 
        y = y1; 
        if(window.addEventListener){ 
         window.addEventListener("scroll",hndlr); 
        } 
        else{ 
         window.attachEvent("onscroll", hndlr); 
        }  

       }, 
       enable: function(){ 
         if(window.removeEventListener){ 
         window.removeEventListener("scroll",hndlr); 
         } 
         else{ 
         window.detachEvent("onscroll", hndlr); 
         } 
       } 

      } 
    })(); 
//for disabled scroll bar. 
Scroll.disable(0,document.body.scrollTop); 
//for enabled scroll bar. 
Scroll.enable();