Question

在用户点击关闭弹出窗口后，当弹出窗口点击完成时，我已经使用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>

$('#fsModal').on('hidden.bs.modal', function (e) {
        $.cookie('close_popup' , '10' ,  { expires : 7 });
    });

    var scroll_function = getCookie("close_popup");

    $(window).scroll(function(){
        if (scroll_function == " ") {
            if ($(this).scrollTop() >= 50) {
                $("#fsModal").modal('show');
            }
        }
    });

Answer 1

您可能想尝试一下，为什么要使用Cookie？

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

Answer 2

试试这个：

HTML：

<input type="hidden" id="is_close" value="0">

<div id="dialog">

</div>

Jquery的：

$(window).on('scroll', function() {
    scrollPosition = $(this).scrollTop();
  if(scrollPosition > 50 && $('#is_close').val() == 0 )
  {
    $('#dialog').dialog({
      buttons: [
        {
          text: "Close",
          click: function() {
            $( this ).dialog( "close" );
            $('#is_close').val('1');
          }
        }
      ]
    });
  }
});

Working Fiddle

Answer 3

我正在使用jQuery插件（jQuery cookies），您可以从https://github.com/js-cookie/js-cookie

获得相同的内容

首先在主页加载事件中将cookie设置为false

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

然后你需要在你的密切模型上设置Cookies

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

滚动后

检查相同的

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

最后删除您退出的Cookie ..

Cookies.remove('ClosePopUp');

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

首先在主页加载事件中将cookie设置为false

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

然后你需要在你的密切模型上设置Cookies

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

滚动后

检查相同的

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

最后删除您退出的Cookie ..

$.removeCookie('ClosePopUp');

页面滚动到50像素时显示模式弹出

3 个答案: