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;。它工作正常，但警告滚动条可能会使宽度跳跃，具体取决于操作系统/浏览器。

当模态打开时，防止正文标记滚动

1 个答案: