Question

我是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>

Answer 1

你需要：

在
隔离show function
使用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>

尝试使弹出窗体仅显示一次

1 个答案: