Javascript 将页面滚动至50px时显示的模式弹出窗口

我使用cookie来存储值，当用户单击关闭弹出窗口后，弹出窗口将不再显示。但我在这方面遇到了麻烦。每当我滚动时弹出窗口就会打开，即使我已经关闭了它

<div id="fsModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
    <button type="button" id="cross-btn" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <div id="desk-view" class="modal-body">
            <div id="pop-up" class="row">   
                <div class="arrow_box side-heading col-xs-5 col-sm-5">
                    <h3>Join the Movement, the newsletter that tackles the justice issues that matter to you most.</h3>
                </div>
                <div class="right-form col-xs-7 col-sm-7">
                    <form class="form-inline subscribe-form">
                        <div class="form-group">
                            <input class="email-popup" placeholder="Enter your email" name="email-input">
                            <button class="btn-form">Sign up</button>
                        </div>
                    </form> 
                </div>
            </div>
        </div>
        <div id="mobil-view" class="modal-body">
            <div class="pop">
                <div class="side-heading">
                    <h3>Join the Movement, the newsletter that tackles the justice issues that matter to you most.</h3>
                </div>
                <div class="right-form">
                    <form class="form-inline subscribe-form">
                        <div class="form-group">
                            <input class="email-popup" placeholder="Enter your email" name="email-input">
                            <button class="btn-form">Sign up</button>
                        </div>
                    </form> 
                </div>
            </div>
        </div>
    </div>
</div>

---

你可能想试试这个，为什么要用饼干呢

var ClosePopUp = false;

$('#fsModal').on('hidden.bs.modal', function (e) {
      ClosePopUp = true;
    });


    $(window).scroll(function(){
            if ($(this).scrollTop() >= 50 && ClosePopUp == false) {
                $("#fsModal").modal('show');
            }else {
 $("#fsModal").modal('hide');
}
    });

试试这个：

Html:

我正在使用jQuery插件（jQuery cookies）来实现这一点，您可以从

首次在主页加载事件中将Cookie设置为false

 Cookies.set('ClosePopUp', 'false'); // set this only on home page load event

$.cookie('ClosePopUp', 'false',{ path: '/' }); // set this only on home page load event

然后，您需要在关闭模型上设置Cookies

$('#fsModal').on('hidden.bs.modal', function (e) {
     Cookies.set('ClosePopUp', 'true');
    });

$('#fsModal').on('hidden.bs.modal', function (e) {
      $.cookie('ClosePopUp', 'true',{ path: '/' });
    });

在你的卷轴上检查相同的内容

 $(window).scroll(function(){
            if ($(this).scrollTop() >= 50 && Cookies.get('ClosePopUp') != 'true' ) {
                $("#fsModal").modal('show');
            }else {
 $("#fsModal").modal('hide');
}
    });

 $(window).scroll(function(){
            if ($(this).scrollTop() >= 50 && $.cookie('ClosePopUp') != 'true' ) {
                $("#fsModal").modal('show');
            }else {
 $("#fsModal").modal('hide');
}
    });

最后在注销时删除Cookie

Cookies.remove('ClosePopUp');

$.removeCookie('ClosePopUp');

==编辑以前版本的Cookies.js=====

首次在主页加载事件中将Cookie设置为false

 Cookies.set('ClosePopUp', 'false'); // set this only on home page load event

$.cookie('ClosePopUp', 'false',{ path: '/' }); // set this only on home page load event

然后，您需要在关闭模型上设置Cookies

$('#fsModal').on('hidden.bs.modal', function (e) {
     Cookies.set('ClosePopUp', 'true');
    });

$('#fsModal').on('hidden.bs.modal', function (e) {
      $.cookie('ClosePopUp', 'true',{ path: '/' });
    });

在你的卷轴上检查相同的内容

 $(window).scroll(function(){
            if ($(this).scrollTop() >= 50 && Cookies.get('ClosePopUp') != 'true' ) {
                $("#fsModal").modal('show');
            }else {
 $("#fsModal").modal('hide');
}
    });

 $(window).scroll(function(){
            if ($(this).scrollTop() >= 50 && $.cookie('ClosePopUp') != 'true' ) {
                $("#fsModal").modal('show');
            }else {
 $("#fsModal").modal('hide');
}
    });

最后在注销时删除Cookie

Cookies.remove('ClosePopUp');

$.removeCookie('ClosePopUp');

---

---

你确定在关闭弹出窗口并滚动到50后正在将值输入scroll_函数吗？这是个问题，我想我没有获取其中的值。为什么要使用cookie进行此操作，请检查我的ansi。我正在尝试将单击值存储在cookie中。好的，尝试使用cookie或本地存储，只要你可以通过变量处理代码。。它创建了不必要的http通信。它的引导模式不是对话框。它只是一个示例，您可以使用任何类型的弹出窗口来代替Jquery UI对话框。OP issue不是popup的类型。好吧，但是当您可以在简单的js变量中处理它时，为什么需要隐藏输入？好奇的jst。即使我已经关闭了它，每个卷轴都会弹出。这对我不起作用。很高兴能帮上忙：）使用cookie的主要原因是我在wordpress网站上为一个项目使用这个弹出窗口。如果我使用cookie，意味着当用户进入页面时，弹出窗口只会出现一次。但我这里有一个小问题。我已经实现了上述代码，然后问题是弹出显示在我的网站的每个页面或帖子。我想这只出现在主页一次，但不是所有的网页。你能帮我吗？在这种情况下，你需要cookie或本地存储，请参阅我的替代ans以了解你的方法。它不会给我结果。这次甚至没有显示弹出窗口未捕获引用错误：Cookie未定义在（索引）：658确保您是jQuery Cookie的引用。js文件是我在评论中给出的站点的最新版本，您已经在jQuery包含到项目中后设置了顺序。这是我的jQuery.cookie.js文件*jQuery cookie插件v1.4.0***版权所有2013 Klaus Hartl*根据MIT许可证发布。但我不能改变这个文件。这是问题，api最近有变化，没关系，我会编辑我的文章1.4