How to show popup 1 time for 1 visitor?

Question

I have code like this:

    <a href="#" id="button">Click me</a>


    <div id="modal">
        <div id="heading">
            Are you sure you want to do that?
        </div>

        <div id="content">
            <p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>

            <a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>

            <a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
        </div>
    </div>

<script type="text/javascript">
        $(document).ready(function() {
            $('#button').click(function(e) { // Button which will activate our modal
                $('#modal').reveal({ // The item which will be opened with reveal
                    animation: 'fade',                   // fade, fadeAndPop, none
                    animationspeed: 600,                       // how fast animtions are
                    closeonbackgroundclick: true,              // if you click background will modal close?
                    dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
                });
            return false;
            });
        });
    </script>

You can view demo here:

http://webdesigntutsplus.s3.amazonaws.com/tuts/316_modal/source/index.html#

How to delay showing the popup 5 seconds after clicking "click me" button ? And when visitor click "Yes, do it now!", the popup will not shown in 1 week even they click "click me" again ? How to do it ? Thanks !

Answer 1

you can use localStorage to save event 'showed modal'

<script type="text/javascript">
        $(document).ready(function() {
            $('#button').click(function(e) { // Button which will activate our modal
             setInterval(function(){  //5 sec
               try {
                var diffDate = new Date().getTime() - parseInt(localStorage.getItem('showedModal'),10);
                if(diffDate > 604800000){   //check showed
                    $('#modal').reveal({ // The item which will be opened with reveal
                        animation: 'fade',                   // fade, fadeAndPop, none
                        animationspeed: 600,                       // how fast animtions are
                        closeonbackgroundclick: true,              // if you click background will modal close?
                        dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
                    });
                }
                } catch(e){
                }
             }, 5000);
            return false;
            });

    $('#content').find('.button.green').click(function(){
        try {
            localStorage.setItem('showedModal', new Date().getTime());  //set showed
        } catch (e) {
        }
    });
        });
    </script>