javascript - 第一次向下滚动显示弹出窗口第二次向下滚动不应该使用 jquery 显示弹出窗口

Question

我试图在向下滚动时显示弹出窗口。某些点弹出窗口将显示工作正常，代码如下。

<div id="spopup" style="display: none;" class="news_sletter">
                            <a style="position: absolute; top: 7px; right: 10px; color: #555; font-size: 10px; font-weight: bold;" href="javascript:void(0);" onclick="return closeSPopup();">
                                <img src="images/ico-x.png" width="18" height="18" style="background: #fff;" />
                            </a>
                            <div class="side_bar_sub_heading">
                                <h6>Newsletter </h6>
                            </div>

                            <p>Subscribe to our email newsletter for useful tips and resources.</p>

                            <form>
                                <div class="form-group blog_form">
                                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email Address">
                                </div>

                                <div class="search_btn-3">
                                    <button class="btn btn-default" type="submit">Subscribe </button>
                                </div>
                            </form>

                        </div>

Jquery代码如下

<script>
 var isAlreadyPopUp = true;

$(window).scroll(function () {
    if(!isAlreadyPopUp){
            if ($(document).scrollTop() >= $(document).height() / 25)
        $("#spopup").show("slow"); else $("#spopup").hide("slow");
     }
});
function closeSPopup() {
    $('#spopup').hide('slow');
}
</script>

CSS 是

<style type="text/css">
    /* popup css*/
    #spopup {
        background: hsl(0, 0%, 0%) none repeat scroll 0 0;
        border-radius: 9px;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        -moz-box-shadow: inset 0 0 3px #333;
        -webkit-box-shadow: inset 0 0 3px #333;
        box-shadow: inner 0 0 3px #333;
        padding: 27px;
        width: 300px;
        position: fixed;
        left: 40%;
        display: none;
        z-index: 10;
        margin-bottom: 40px;
        text-align: center;
    }
</style>

我的要求是，一旦用户不想订阅，他将点击关闭按钮，弹出窗口将成功关闭，五到十分钟后，我们希望再次自动显示弹出窗口。

请帮帮我。

Answer 1

您可以创建一个全局变量。

var isAlreadyPopUp;

您可以根据需要将值设置为“true”或“false”。在这种情况下，关闭时或已经滚动等。如下所示。

isAlreadyPopUp=true;

在它之后，您总是可以检查isAlreadyPopUp 值，如果它是真的，您不需要执行您的弹出显示代码。

$(window).scroll(function () {
        if(!isAlreadyPopUp){
                if ($(document).scrollTop() >= $(document).height() / 25)
            $("#spopup").show("slow"); else $("#spopup").hide("slow");
         }
    });
    function closeSPopup() {
        $('#spopup').hide('slow');
 }

编辑:-

您可以使用 setTimeout 函数在一个时间间隔内打开弹出窗口。

setTimeout(function(){ alert("Hello"); }, 3000);