模態打開時防止body標簽滾動

Question

我想防止在打開模態時滾動body標簽。 我在這里嘗試過解決方案，但是沒有一個適合我。 我嘗試實現wheelcroll功能，但它不能防止body div滾動。 CSS解決方案也不起作用。

my HTML
            <div class="box">
                <a class="button" href="#popup1">CENIK</a>
            </div>
            <div id="popup1" class="overlay">
                <div class="popup">
                    <div class="logo"><img src="img/logo.png" height="
                      35px;"></div>

                    <a class="close" href="#">&times;</a>
                    <div class="content">
                       Lorem ipsum............
                        </ul>
                    </div>
                </div>
            </div>

我的JS文件

/* eslint-disable */

function popupOpenClose(popup) {

    /* Open popup */
    $(popup).show();

    /* Close popup if user clicks on background */
    $(popup).click(function(e) {
        if ( e.target == this ) {
            if ($(popup).is(':visible')) {
                $(popup).hide();
            }
        }
    });

    /* Close popup and remove errors if user clicks on cancel or close buttons */
    $(popup).find("button[name=close]").on("click", function() {
        if ($(".formElementError").is(':visible')) {
            $(".formElementError").remove();
        }
        $(popup).hide();
    });
}

$(document).ready(function () {
    $("[data-js=open]").on("click", function() {
        popupOpenClose($(".popup"));
    });
});

Answer 1

一種簡單的方法是使您的body overflow: hidden; 當模態打開時。 它可以正常工作，但是要警告滾動條可能會使寬度跳動，具體取決於操作系統/瀏覽器。