将div填充为弹出窗口问题

时间:2017-02-28 21:11:09

标签: javascript jquery html css

我正在使用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>

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

1 个答案:

答案 0 :(得分:1)

看看这个:

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

它只是阻挡你身体滚动的东西。

关闭时执行此操作:

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

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