无法关闭PopUp

Question

我创建了一个jQuery对话框窗口来显示页面滚动，并在这个弹出窗口中显示一个div。问题是，如果我关闭弹出并继续滚动窗口显示一次又一次。那我怎么才能永远关闭它呢？

<div id="spopup" style="display: none;">
<!--close button-->
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeSPopup();">
    <img src="ico-x.png" width="18" height="18"/>
</a>

​

css：

#spopup{
    background:#f3f3f3;
    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:12px 14px 12px 14px;
    width:300px;
    position:fixed;
    bottom:13px;
    right:2px;
    display:none;
    z-index:90;
}

jquery

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

    $("#spopup").hide("slow"); 
}

小提琴手：https://jsfiddle.net/jqvo1tmf

Answer 1

解决这个问题的一个简单/快速的方法是使用一个全局变量，它充当一个标志。

最初，该标志应为0/ false

在开始滚动时，当他的事件触发检查标志是否上升(wasClosed)

如果没有，则显示弹出，否则将其隐藏起来。

一旦用户单击“关闭”按钮，该标志将切换为true。

​

<script>
var wasClosed = false;

function closeSPopup(){
    $("#spopup").hide("slow");
    wasClosed = true;
};

$(window).scroll(function(){

if($(document).scrollTop()>=$(document).height()/5 && !wasClosed)
   $("#spopup").show("slow");
else 
   $("#spopup").hide("slow");
});

</script>

​

Answer 2

您的on-click函数不会被调用，因此您可以为关闭按钮图像提供id，然后相应地编写close函数。

假设您的密切图像的id是close。

那么联合来文将是：

$("#close").on('click', function(){
   $("#spopup").hide("slow");
});

请检查您的解决方案小提琴拉链

Answer 3

试试这个：小提琴手

代码更新-

var popup ='1';
$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5 && popup=='1')
        $("#spopup").show("slow");else $("#spopup").hide("slow");
});
function closeSPopup(){
popup ='0';
    $("#spopup").hide("slow");
};