Question

我有这样的代码：

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

您可以在此处查看演示：

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

点击＆＃34后如何延迟显示弹出窗口5秒;点击我＆＃34;按钮？当访问者点击＆＃34;是，立即行动！＆＃34;，即使他们点击＆＃34;点击我＆＃34;弹出窗口也不会在1周内显示又一次？怎么做？谢谢！

Answer 1

您可以使用localStorage保存事件'show 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>

如何为1位访客显示弹出1次？

1 个答案: