Question

我想请求关于我的项目的帮助。我做了一个简单的灯箱用于广告目的。我想不要重复灯箱弹出窗口，如果它已经弹出一次或一次被用户关闭。

这是我的HTML

    <div class="backdrop"></div>

<div class="box">
    <a class="close"><img src="/images/assets/close.png" width="35" height="35"/></a>

    <span class="lightbox-title">Wait... Before You Go!</span>
    <span class="lightbox-subtitle">You May Also Be Interested In...</span>


    <div class="brands-container">
        <a class="hyperlink" href="http://www.mywebsite.com">
            <div class="col-lg-4 brand">
                <img class="logo" src="/images/assets/mywebsite-logo.png"></img>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <img class="screenshot" src="/images/assets/mywebsite-ss.jpg" width="320" height="150"/></img>

                <a href="http://www.mywebsite.com">
                    <button type="button" class="btn btn-success btn-lg btn-block">Visit Now</button>
                </a>
            </div>
        </a>

        <a class="hyperlink" href="http://www.mywebsite.com">
            <div class="col-lg-4 brand">
                <img class="logo" src="/images/assets/mywebsite-logo.png"></img>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <img class="screenshot" src="/images/assets/mywebsite-ss.jpg" width="320" height="150"/></img>

                <a href="http://www.mywebsite.com">
                    <button type="button" class="btn btn-success btn-lg btn-block">Visit Now</button>
                </a>
            </div>
        </a>    

        <a class="hyperlink" href="http://www.mywebsite.com">
            <div class="col-lg-4 brand">
                <img class="logo" src="/images/assets/mywebsite-logo.png"></img>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <img class="screenshot" src="/images/assets/mywebsite-ss.jpg" width="320" height="150"/></img>

                <a href="http://www.mywebsite.com">
                    <button type="button" class="btn btn-success btn-lg btn-block">Visit Now</button>
                </a>
            </div>
        </a>
    </div>      
</div>

这是我的灯箱弹出式触发器

<script>
    $(document).ready(function(){
        $(document).on('mouseleave', function() {
            $('.backdrop, .box').animate({
                'opacity': '.50'
            }, 300, 'linear');
            $('.box').animate({
                'opacity': '1.00'
            }, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');
            console.log('mouse left');
        });

        $('.close').click(function(){
            close_box();
        });

        $('.backdrop').click(function(){
            close_box();
        });
    });

    function close_box()
    {
        $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
            $('.backdrop, .box').css('display', 'none');
        });
    }
</script>

当光标偏离页面时，我的灯箱会触发。我想有一个逻辑，当灯箱弹出窗口已经出现一次时，它将不会显示在第二个视图上。请帮帮我。

Answer 1

您可以使用一个全局变量作为标志来实现此目的。

$(document).ready(function(){

    var lightBoxNotAppeared = true; // At the time of loading

    $(document).on('mouseleave', function() {

        if( lightBoxNotAppeared ){

            $('.backdrop, .box').animate({
                'opacity': '.50'
            }, 300, 'linear');
            $('.box').animate({
                'opacity': '1.00'
            }, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');

            console.log('mouse left');

            lightBoxNotAppeared = false; // change flag to false after lightbox appeared
        }
    });

灯箱弹出窗口的Cookie逻辑，当在页面上悬停时触发

1 个答案: