仅显示一次弹出消息

Question

我有一个弹出消息，每次用户访问我的网页时都会显示。 这很烦人，我只想显示一次弹出消息。 怎么做？

 <script> $(document).ready(function () { $("#popup").hide().fadeIn(1000); //close the POPUP if the button with id="close" is clicked $("#close").on("click", function (e) { e.preventDefault(); $("#popup").fadeOut(1000); }); }); </script> 

 <!-- Pop up message --> <link href="myhome/popup.css" rel="stylesheet" type="text/css"/> <div class="body-popup" style="height: 100%; width: 100%; background-color: black"> <div id="popup"> <div id="close" class="alert alert-info alert-dismissable"> <button type="button" class="pull-right close" data-dismiss="alert" aria-hidden="true">&times;</button> CLOSE <img src="/myhome/assets/img/prom.jpg" alt="popup" class="image-pop"/> </div> </div> </div> 

Answer 1

一旦他们看到了，将其保存在localStorage中。

$(document).ready(function () {
    const popup = $("#popup");
    popup.hide()
    if (localStorage.seenPopup) return;
    popup.fadeIn(1000);
    //close the POPUP if the button with id="close" is clicked
    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
        localStorage.seenPopup = 'true'; // value doesn't matter as long as it's not falsey
    });
});

Answer 2

您可以编写并检查Cookie，如下所示：

...
const showPopup = $.cookie('noPopup');
if (!noPopup) {
   $("#popup").hide().fadeIn(1000);
   $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
        $.cookie('noPopup', true);
    });
}
....