Question

我有bootstrap 4模态弹出窗口，它会自动显示在我的页面中，我添加了一个不再显示的按钮使用localStorage（）在模态上保存“ closed”状态，因此它不会显示用户。

这是我到目前为止所拥有的。

HTML

 <div class="modal-footer">
        <button id="dont_show" class="btn-sm dont-show_again" type="button" data-dismiss="modal" >Dont show again</button>             
    </div>

js

$(document).ready(function(){
    var currentLocation = window.location.pathname + window.location.search;

    if(currentLocation =="/create-movie"){
        $(document).ready(function(){
            $("#myModal").modal();
        })

    }else{

    }

     var dontShowId =document.getElementById('dont_show');
     dontShowId.addEventListener('click', function(){
        var isshow = localStorage.getItem('status');
        console.log(isshow);
          if (isshow == null) {
              localStorage.setItem('status', 'shown');
                console.log(isshow);
              // Show popup here
              $('#myModal').modal('show');
          } else if(isshow != null) {
             $('#myModal').modal('hide');
          }
     })

})

不幸的是，单击“不再显示”按钮后，它关闭了模式，但是当我刷新页面时，它再次出现。

我的代码有什么问题？

Answer 1

在javascript代码中，无论任何情况，都会显示模式弹出窗口。尽管您在按钮的click事件上设置了localStorage，但是您从不使用它来检查初始负载。这是入门的最小简化版本。

代码：

$(document).ready(function() {
  // onload decide baseed on localStorage
  var isshow = localStorage.getItem('status');
  var currentLocation = window.location.pathname + window.location.search;
  if (currentLocation == "/create-movie" && isshow != 'shown')
    $('#dont_show').modal('show');

  // on click set localStorage
  var dontShowId = document.getElementById('dont_show');
  dontShowId.addEventListener('click', function() {
    if (isshow == null)
      localStorage.setItem('status', 'shown');
  });

});

希望这会有所帮助：）

使用本地存储站点隐藏模式不起作用

1 个答案: