尝试使弹出表单只显示一次答案

【问题标题】：Try to making popup form only show one time尝试使弹出表单只显示一次
【发布时间】：2018-08-31 08:02:48
【问题描述】：

我是 JavaScript 新手。下面是我的弹出表单代码，尝试找到一种方法使弹出表单只显示一次。寻找解决方案。有人可以帮我吗？

这是我的表单代码：

<div id="bkgOverlay" class="backgroundOverlay"></div>

<div id="delayedPopup" class="delayedPopupWindow">

  </div>
  <!-- Begin Pop-up Signup Form -->
  <div id="mc_embed_signup">

    <form action="# " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">

        <input type="submit" value="SIGN UP" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-default">
      </div>
</form>
  </div>
  <!-- End Signup Form -->
</div>

我已将这些包含在页面标题中：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>

然后使用 jQuery 弹出窗口跟随消息。这里是：

<script>
          $(document).ready(function ()
        {
            //Fade in delay for the background overlay (control timing here)
            $("#bkgOverlay").delay(9800).fadeIn(400);
          //Fade in delay for the popup (control timing here)

            $("#delayedPopup").delay(10000).fadeIn(400);

            //Hide dialouge and background when the user clicks the close button
            $("#btnClose,.backgroundOverlay").click(function (e)
            {
                HideDialog();
                e.preventDefault();
            });
        });
        //Controls how the modal popup is closed with the close button
        function HideDialog()
        {
            $("#bkgOverlay").fadeOut(400);
            $("#delayedPopup").fadeOut(300);
        }
            </script>

【问题讨论】：

如果我的回答对您有帮助，请标记为“已接受”并投票 :)

标签： javascript jquery html cookies popup

【解决方案1】：

你需要：

跟踪您之前向该用户显示该对话框的事实
隔离显示功能
使用 cookie 来保持显示事件

不能保证它 100% 有效，因为我现在没有时间，但你肯定可以开始使用它。

因此我重写了上面的代码：

<script>
    var didShowOnce = false;

    var canShowDialog = function () {
        // try to read cookie
        var ckvalue = $.cookie('dialog-shown');
        if (typeof ckvalue !== 'undefined' && ckvalue != null) {
            didShowOnce = ckvalue == '1';
        }
        // write cookie to make sure it sticks
        $.cookie('dialog-shown', didShowOnce ? '1' : '0', { expires: 365, path: '/' });

        return !didShowOnce;
    };


    $(document).ready(function () {
        ShowDialog();
    });


    var ShowDialog = function () {

        if (canShowDialog()) {

            $.cookie('dialog-shown', '1', { expires: 365, path: '/' });

            //Fade in delay for the background overlay (control timing here)
            $("#bkgOverlay").delay(9800).fadeIn(400);
            //Fade in delay for the popup (control timing here)

            $("#delayedPopup").delay(10000).fadeIn(400);

            //Hide dialouge and background when the user clicks the close button
            $("#btnClose,.backgroundOverlay").click(function (e)
            {
                HideDialog();
                e.preventDefault();
            });
        }
    }

    var HideDialog = function () {
        $("#bkgOverlay").fadeOut(400);
        $("#delayedPopup").fadeOut(300);
    }
</script>

【讨论】：