javascript - 将 div 填充为弹出问题

Question

我正在使用 java 脚本将 div 显示为弹出窗口。我在页面加载 5 秒后加载此弹出窗口。但是当我关闭弹出窗口时，div 已关闭，但在关闭弹出 div 后我无法上下滚动。

请找到下面的代码:

<div id="outer-popup"
 style="position: absolute; left: 0; top: -10px; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); display: none; z-index: 10000">
<div class="popup" id="popUpWrapper">

    <div class="popupContainer" style="padding:0 0 0 10px;">


        <div class="popupClose" id="popupclose" style="float:right;width:auto;">
            <a href="#" class="pClose"><img
                    src="/img/src/ex.jpg"></a>
        </div> 



        <form:form modelAttribute="dataForm" id="data_form" name="dataForm" 
                   method="post" action="/dataAction" >

            FORM DATA TO SUBMIT
        </form:form>
    </div>
</div>

 <script>
jQuery(document).ready(function () {
    setTimeout(showPopup(), 5000);
});

function showPopup() {
    $('#outer-popup').show(0, function () {
        $('body').css('overflow', 'hidden');
        $('.popup').center();
    });
}



$("#popupclose").click(function () {
    $("#outer-popup").css("display", "none");
});
</script>

请纠正我并提供有关如何纠正此问题的建议。谢谢。

Answer 1

看看这个:

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

它只是阻止你在 body 上滚动的东西。

关闭时执行此操作:

$("#popupclose").click(function () {

    $("#outer-popup").css("display", "none");
('body').css('overflow', 'scroll');
});