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

jsfiddle：https://jsfiddle.net/jqvo1tmf

Answer 1

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

假设您的近距离图片的ID为str。

然后JS将是：

close

请检查您的解决方案Fiddle Link

Answer 2

试试这个：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");
};

Answer 3

当您第一次显示弹出窗口时，为其添加一个类。喜欢＆＃34;解雇＆＃34;。

然后滚动时，检查弹出窗口是否有此类。

如果没有，请展示它。

Answer 4

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

你的小提琴中出现以下错误：

未捕获的ReferenceError：未定义closeSPopup

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

希望htis有所帮助。

Answer 6

针对此问题的简单/快速解决方法是使用充当标志的全局变量

最初标志应为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 7

更简单：

    //$("#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();
    };

无法关闭PopUp

7 个答案: