满足条件时关闭引导模式

Question

我有一个引导模式 v3.2.0，它会在页面加载时显示。它被用作年龄验证弹出窗口。

我正在寻找一种在满足条件时关闭此模式的方法。基本上，当用户单击一个按钮时，我希望它关闭，但我也想确保在单击该按钮后，模式不会再次出现在页面加载中。

这里是代码

 $(window).load(function(){        
   $('#myModal').modal('show')
    }); 

<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button id="footer-close" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

此代码可在页面加载时成功加载引导模式，并在您单击关闭按钮时关闭模式，但模式仍会在页面加载时再次出现。由于我对 Javascript 不是很擅长，我不确定如何处理条件语句或 if 语句。到目前为止，我已经有了基本的骨架：

if (condition) {
  $("#myModal").modal('hide');
} else { 
  //  block of code to be executed if the condition is false
}

如果单击了关闭按钮，则应该在原始 if 语句中。它还应该防止模态再次自动加载。也许我什至不需要 else 语句。

他们甚至可能是我没有考虑过的更好的选择。非常感谢任何帮助。

    $('#myModal').modal('show')
    
    $('#over18').on('click', function (e) {

    $('#myModal').modal('hide')

});

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a href="https://google.co.uk" class="close" role="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></a>
        <img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
      </div>
      <div class="modal-body">
        <p class="modal-p">You must be at least 18 years old to enter this site.</p>
      </div>
      <div class="modal-footer">
        <button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
        <a href="https://google.co.uk" id="under18" class="btn btn-danger" role="button">I am under 18</a>
      </div>
    </div>
  </div>
</div>

为了更加清楚，如果我使用以下代码，当您单击按钮时它会显示警报，因此 javascript 和代码正在为此工作，使用引导程序时它根本不起作用：$('# myModal').modal('隐藏');

$('#over18').on('click', function () {

    alert('Hello!');

});

所以在玩了一些之后，下面的代码会自动打开模态框，当点击 18 岁以上的按钮时它会关闭，并且会出现一个警报，说模态框即将被隐藏。我这样做是为了确保 javascript 工作正常。

调用警报的行是我应该放置 localstorage 行以确保模态不再显示的位置。但是，这不起作用。

  $("#myModal").modal("show");
    
  $("#over18").click(function(){
    $("#myModal").modal("hide");
  });
  
  $("#myModal").on('hide.bs.modal', function(){
    alert('The modal is about to be hidden.');
  });

Answer 1

您可以尝试这样的方式来决定是否显示模态：

// On initial page load
if (localStorage.getItem('age-verified') !== true) {
    $("#myModal").modal('show');
}

然后，如果模态显示 - 执行以下操作：

// Upon the age being confirmed
$('#footer-close').on('click', function() { // This is for illustration - handle the close event on the modal however you choose
    $("#myModal").modal('hide');
    localStorage.setItem('age-verified', true);
});

已更新 - 基于您发布的新代码

我已经设法为您创建了一个工作示例。 HTML 文档中的脚本标签的顺序必须与以下相同。 Bootstrap 依赖于 jQuery - 所以需要先声明。

还要注意 - 如果您尝试在 StackOverflow 的代码片段编辑器中运行此示例，它将无法正常工作 - 因为代码 sn-ps 已被沙盒化，并且无权访问 localStorage。不过，您应该可以在自己的计算机上本地运行它。

if (localStorage.getItem('age-verified') !== true) {
  $('#myModal').modal('show');
  
  $('#over18').on('click', function (e) {
    $('#myModal').modal('hide');
    
    localStorage.setItem('age-verified', true);
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Your page content here</h1>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
          <div class="modal-header">
            <a href="https://google.co.uk" class="close" role="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></a>
            <img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
          </div>
          <div class="modal-body">
            <p class="modal-p">You must be at least 18 years old to enter this site.</p>
          </div>
          <div class="modal-footer">
            <button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
            <a href="https://google.co.uk" id="under18" class="btn btn-danger" role="button">I am under 18</a>
          </div>
        </div>
  </div>
</div>