populating div as a popup issue

Question

I am using java script to display a div as a pop up. I am loading this popup after 5seconds the page is loaded. But when i close the pop up , the div is closed but i am not able to scroll up and down after closing the popup div.

please find the code below:

<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>

Please correct me and provide suggestions on how to correct this. Thanks.

Answer 1

take a look at this:

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

Its just the thing that blocks your scroll on body.

On close do this:

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

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