Question

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

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

这是代码

response_v=boto3.client("ec2").describe_snapshots(Filters=[{"Name":"volume-id","Values":["vol-fffffffffff"]}])

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

此代码可在页面加载时成功加载引导程序模式，并在您单击关闭按钮时关闭该模式，但是该模式仍将在页面加载时再次出现。由于我对Javascript不太了解，因此不确定如何执行条件语句或if语句。到目前为止，我还没有骨头：

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

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

他们甚至可能是我从未考虑过的更好的选择。任何帮助表示赞赏。

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

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

为更加清楚起见，如果我使用以下代码，则当您单击按钮时，它确实会显示警报，因此javascript和代码对此有效，使用引导程序时它根本不起作用：$（'＃ 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>

因此，在进行了更多操作之后，以下代码将自动打开模式，当单击18岁以上按钮时，它将被关闭，并且出现警报，提示该模式将被隐藏。我这样做是为了确保JavaScript正常运行。

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

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

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>

条件满足时关闭Bootstrap模式

1 个答案: