无法关闭弹出窗口

Question

我制作了一个 jQuery 对话框 window 以在页面滚动时显示，并在此弹出窗口中显示 div。问题是如果我关闭弹出窗口并继续一次又一次地滚动 window 显示。那么我怎样才能永久关闭它呢？

<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"); 
}

jsfiddle: https://jsfiddle.net/jqvo1tmf

Answer 1

当您第一次显示弹出窗口时，向其添加一个 class。喜欢 "fired".

然后当你滚动时，检查弹出窗口是否有这个class。

如果没有，则显示它。

Answer 2

 <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href='#'>
    <img src="ico-x.png" onclick="closeSPopup()" width="18" height="18"/>
</a>

Answer 3

您在 fiddle 中收到以下错误：

Uncaught ReferenceError: closeSPopup is not defined

所以您只需将函数的定义 closeSPopup() 放在正文中，检查 Updated fiddle.

希望对您有所帮助。

Answer 4

解决这个问题的一个简单/快速的方法是使用一个全局变量作为标志

最初标志应为 0 / false

在事件触发时开始滚动检查标志是否已升起（已关闭）

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

一旦用户点击关闭按钮，该标志将切换为真。

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

您的点击功能未被调用，因此您可以为关闭按钮图像提供 id，然后相应地编写关闭功能。

假设您关闭的图像的 id 是 close。

那么 JS 将是：

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

请检查 fiddle 以获得您的解决方案 Fiddle Link

Answer 6

更简单：

    //$("#spopup").hide("slow");
    $("#spopup").remove();

完整代码示例：

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

Answer 7

试试这个：Jsfiddle

代码已更新 -

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");
};

无法关闭弹出窗口

Unable to close PopUp

jquery

popup