条件遇到时关闭Bootstrap模态

Question

我有一个bootstrap模式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和代码正在为此工作，它在使用bootstrap时根本不起作用：$（'＃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的代码剪切编辑器中运行此示例，它将无法工作 - 因为代码片段是沙盒的，并且无法访问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>