Html – How to add a 10 second countdown timer to a popup

csshtmljquery

I just want to add a countdown timer of 10 seconds to a popup after which the popup closes.

When the popup is loaded I need to display a 10 second countdown within the popup. Once the 10 second time elapses the popup should then close.

This is the code I have tried so far:

<html>
<head>
<title>Popup Box DIV</title>
<style type="text/css">
#popup_box {
    display: none; /* Hide the DIV */
    position: fixed;
    _position: absolute; /* hack for internet explorer 6 */
    height: 500px;
    width: 500px;
    background:;
    left: 400px;
    top: 50px;
    z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 25px;
    /* additional features, can be omitted */
    border: 2px;
    padding: 15px;
    font-size: 15px;
    -moz-box-shadow: 0 0 5px;
    -webkit-box-shadow: 0 0 5px;
    box-shadow: 0 0 5px;
}
#container {
    background:; /*Sample*/
    width: 100%;
    height: 100%;
}
a {
    cursor: pointer;
    text-decoration: none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
    font-size: 20px;
    line-height: 15px;
    right: 5px;
    top: 5px;
    position: absolute;
    color: #6fa5e2;
    font-weight: 500;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">        
$(document).ready( function() {

    // When site loaded, load the Popupbox First
    loadPopupBox();

    $('#popupBoxClose').click( function() {            
        unloadPopupBox();
    });

    $('#container').click( function() {
        unloadPopupBox();
    });

    function unloadPopupBox() {    // TO Unload the Popupbox
        $('#popup_box').fadeOut("slow");
        $("#container").css({ // this is just for style        
            "opacity": "1"  
        }); 
    }    

    function loadPopupBox() {    // To Load the Popupbox
        $('#popup_box').fadeIn("slow");
        $("#container").css({ // this is just for style
            "opacity": "0.3"  
        });         
    }        
});
</script>
</head>
<body>
<div id="popup_box"> <!-- OUR PopupBox DIV-->
    <h1>it closed  after 10 sec</h1>
    <a id="popupBoxClose">Close</a> </div>
<div id="container"> <!-- Main Page -->
    <h1></h1>
</div>
</body>
</html>

Best Solution

You need to use setInterval. This will fire a function every x amount of time (1000ms in this case or 1 Second). This function is responsible for decreasing the counter variable until it reaches 0 at which point it unloads the popup and stops the interval from running again using clearInterval.

http://jsfiddle.net/chrissp26/8ygva6hm/

Add an ID to the H1 like this:

<h1 id="countDown">it closed  after 10 sec</h1>

and change your JavaScript to this:

$(document).ready( function() {

    // When site loaded, load the Popupbox First
    loadPopupBox();

    $('#popupBoxClose').click( function() {            
        unloadPopupBox();
    });

    $('#container').click( function() {
        unloadPopupBox();
    });

    function unloadPopupBox() {    // TO Unload the Popupbox
        $('#popup_box').fadeOut("slow");
        $("#container").css({ // this is just for style        
            "opacity": "1"  
        }); 
    }    

    function loadPopupBox() {    // To Load the Popupbox

        var counter = 10;
        var id;
        $('#popup_box').fadeIn("slow");
        $("#container").css({ // this is just for style
            "opacity": "0.3"  
        });

        id = setInterval(function() {
            counter--;
            if(counter < 0) {
                clearInterval(id);

                unloadPopupBox();
            } else {
                $("#countDown").text("it closed  after " + counter.toString() + " seconds.");
            }
        }, 1000);

    }        
});

Edit: Version 2

Here's a different version you might like. The script is fully encapsulated and as a result is much tidier. It also has smoother animation transitions etc etc.

http://jsfiddle.net/chrissp26/8ygva6hm/2/