结束时，在遇到条件时关闭

我有一个Bootstrap Modal 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>

此代码可以成功地加载Bootstrap模式在页面加载上，并在单击"关闭"按钮时关闭模式，但是模态仍将再次出现在页面加载上。由于我对JavaScript并不是很强大，因此我不确定如何进行有条件或if语句。到目前为止，我有裸露的骨头：

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

在原始if语句中应该是单击"关闭"按钮。它还应防止模态再次自动加载。也许我什至不需要其他陈述。

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

    $('#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'）。模态（'hide'）;

$('#over18').on('click', function () {
    alert('Hello!');
});

因此，经过更多的播放后，以下代码将自动打开模式，当单击18个按钮时，它将关闭，并且警报似乎会说模态即将被隐藏。我这样做是为了确保JavaScript工作。

调用警报的行是我应该放置局部存储线以确保模态不会再次显示的地方。但是，这行不通。

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

您可以尝试这样的事情，以决定是否显示模式：

// 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>

您可以根据使用哪种版本的Bootstrap来参考执行此操作的官方Bootstrap参考指南。请参阅参考

相关内容

最新更新

热门标签：