21

Jqueryダイアログを使用して、ページの上部にポップアップボックスウィンドウを開きます。ダイアログボックスを開くときに、一般的なページのスクロールを無効にします。そうするために、私はやっています：

$('body').css({overflow:'hidden'});

ダイアログが開いたとき、および：

$('body').css({overflow:'auto'});

ダイアログが閉じたとき。

これは機能しますが、スクロールバーを削除すると、後ろのコンテンツが右に移動し、結果が良くありません。

cssクラス「noscroll」を作成して、別のメソッドを試しました。

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

次に、前のjsコードの代わりに、ダイアログの開閉時にこのクラスを本文に追加および削除します。

これはスクロールバーで機能し、後ろのコンテンツは右に移動しませんが、この方法では後ろのコンテンツが上に戻ります。

つまり、基本的に、method1はコンテンツを右に移動し、method2はコンテンツを上に戻します。

誰かがこれの解決策を知っていますか？ダイアログが開いたときに後ろのコンテンツのスクロールがなく、スクロールを無効にする動きがありません...？

4

6 に答える 6

11

私は自分のソリューションの非常に簡単な例を作成しました。

http://jsfiddle.net/6eyJm/1/

ポップアップはボックスにある必要があります

<div id="shadow">
<div id="popup">
    <a id='close' href="#">Close</a>
</div>

次に、それらの CSS をルート div に配置します

#shadow{
    display: none;
    position: fixed;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
}

白い境界線を見たくないので、位置を固定することは非常に重要です。これは、本体ではなくウィンドウ全体の幅になります。

次に、小さなJSトリックがあります

$('#open').click(function(e){
    e.preventDefault()
    $('body').width($('body').width());
    $('body').css('overflow', 'hidden');
    $('#shadow').css('display', 'block');
})
$('#close').click(function(e){
    e.preventDefault()
    $('body, #shadow').removeAttr('style')
})

ここでの目標は、スクロール バーを削除する前に本体の幅を取得することです。コンテンツは移動しません。

それが役立つことを願っています!

私の母国語ではなく、私の英語で申し訳ありません。

于 2013-04-26T14:08:30.807 に答える
9

オフセットを覚えておくと、ポップアップを寄せ付けません。

JSフィドル

HTML

<div id="popupholder">
    <button id="close">Close me</button>
</div>


asd <br />asd <br />asd <br />asd <br />asd <br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />

CSS

html, body {
    margin: 0px;
}

#popupholder {
    width: 100%;
    height: 100%;
    position: absolute;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    background-color: rgba(0,0,0,0.75);
    display: none;
}

#close {
    display: block;
    height: 20px;
    margin: 75px auto 0px auto;
}

JavaScript

$(document).ready(function() {
    $('.open').click(function() {
        // Block scrolling
        $('body').css('overflow', 'hidden');

        // Show popup
        var offset = window.pageYOffset;
        //console.log(offset);
        $('#popupholder').css({
            'display': 'block',
            'top': offset + 'px'
        });
    });

    $('#close').click(function() {
        // Enable scrolling
        $('body').css('overflow', 'auto');

        // Hide popup
        $('#popupholder').css('display', 'none');
    });
});

安全上の理由から、に非常に高い値を追加できz-indexます#popupholderが、それは質問とはあまり関係ありません.

于 2013-04-21T18:53:49.783 に答える
3

これは私がこれまでに得た最良の解決策です。そして、私が他のすべてを試したと信じてください。これが私が思いついた最良かつ最も簡単な解決策です. これは、ページを右から押してシステムのスクロールバー用のスペースを確保する Windows デバイスや、ブラウザーのスクロールバー用のスペースを必要としないIOS デバイスでうまく機能します。したがって、これを使用すると、右側にパディングを追加する必要がなくなるため、本文または html のオーバーフローを css で非表示にしてもページがちらつきません。

考えてみれば、解決策は非常に簡単です。アイデアは、ポップアップが開かれた瞬間にwindow.scrollTop()に同じ正確な位置を与えることです。また、ウィンドウのサイズが変更されたときにその位置を変更します（スクロール位置が変更されると）。

では、行きましょう...

まず、ポップアップが開いていることを知らせる変数を作成し、それをstopWindowScrollと呼びます。これを行わないと、ページで未定義の変数のエラーが発生し、アクティブでないとして 0 に設定されます。

$(document).ready(function(){
    stopWindowScroll = 0;
});

次に、open popup 関数を、プラグインまたはカスタムとして使用しているポップアップをトリガーするコード内の任意の関数にすることができます。この場合、単純なドキュメント オン クリック機能を備えた単純なカスタム ポップアップになります。

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

次に行うことは、ポップアップを閉じる関数を作成することです。これは、既に作成したか、プラグインで使用している任意の関数にすることができます。重要なことは、stopWindowScroll変数を 1 または 0 に設定して、開いているか閉じているかを知るために、これら 2 つの関数が必要であるということです。

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

次に、window.scroll 関数を作成して、上記のstopWindowScrollが 1 (アクティブ) に設定されるとスクロールを防止できるようにします。

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

それでおしまい。ページの独自のスタイルを除いて、これが機能するために必要な CSS はありません。これは私にとって魅力のように機能し、あなたや他の人に役立つことを願っています.

JSFiddle での実際の例を次に示します。

JS フィドルの例

これが役に立ったかどうか教えてください。よろしく。

于 2018-09-13T13:59:59.543 に答える
1

オーバーフロー非表示の前後のボディ幅の差を計算し、それをボディの右パディングとして適用できます

var bodyStartW = $("body").width();
$("body").css("overflow-y" , "hidden");
var bodyEndW = $("body").width();
var bodyMarginL = bodyEndW - bodyStartW;
$("body").css("padding-right" , bodyMarginL);

Safari では、「html」タグと padding-right の代わりに margin-right に対して同じトリックがありました

于 2013-09-30T13:31:11.540 に答える