当页面滚动到 50px 时显示模态弹出

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 cookie），您可以从 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');
}
    });

终于在您注销时删除 cookies..

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

最后在您注销时删除 cookies..

$.removeCookie('ClosePopUp');

当页面滚动到 50px 时显示模态弹出

modal pop up to be displayed when the page is scrolled to 50px

javascript

jquery

html

twitter-bootstrap-4