显示模式时关闭引导警报答案

【问题标题】：Dismiss Bootstrap alert when a modal is shown显示模式时关闭引导警报
【发布时间】：2020-07-28 17:26:15
【问题描述】：

使用最新的引导程序，我创建了一个固定警报消息，其中包含一个在单击时会打开模式的链接。屏幕上的模态弹出窗口，但警报仍处于打开状态。

如何在弹出模式时关闭警报？

我尝试使用data-dismiss="alert" 在使用data-toggle="modal" data-target="#privacyterms" 打开模态的同一链接上，现在警报不会关闭，模态将无法正常工作。我究竟做错了什么？ Bootstrap 或 jQuery 是否有解决此问题的方法？

            <div class="text-center alert alert-info alert-dismissible alert-fixed m-0" role="alert">

                        <button type="button" class="close " data-dismiss="alert"><span style="font-size:30px;" class="" aria-hidden="true">&times;</span></button>

                        <strong>We use cookies!</strong> By continuing to use this site you're agreeing to our terms and privacy policy.<a href="#" data-toggle="modal" data-dismiss="alert" data-target="#privacyterms"> Learn more?</a>   

                        <button data-dismiss="alert" type="button" class="btn btn-secondary">I agree</button>

                    </div>

这是我的工作 Fiddle 它缺少链接上的 data-dismiss=alert，但也许有人可以使用它来提出更好的解决方案。

感谢您的帮助！

【问题讨论】：

标签： jquery twitter-bootstrap bootstrap-4 bootstrap-modal alert

【解决方案1】：

您可以尝试使用引导程序提供的模态显示事件并尝试在那里关闭警报消息。

请在下面找到可能对您有所帮助的解决方案。我添加了 'show.bs.modal' 处理程序，该处理程序在模式打开后调用，并且我正在尝试在那里关闭警报消息。

<html>

<head>
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <script>

    $(document).ready(function () {
      $("#privacyterms").on('show.bs.modal', function () {
        $('#textAlert').alert('close');
      });

    });
  </script>


</head>

<body>
  <div class="modal fade px-0 mx-0" id="privacyterms" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl " role="document">


      <div class="modal-content">


        <div class="modal-header py-0 w-100">

          <ul id="exampleModalCenterTitle"
            class="justify-content-center w-100 tabgroup nav display-inline-block mx-auto" role="tablist">
            <li class="nav-item mr-4">
              <a class="text-dark nav-link active modal-title" data-toggle="pill" href="#privacy" role="tab"
                aria-controls="privacy" aria-selected="true">Privacy <span
                  class="d-none d-sm-inline-block">Policy</span></a>
            </li>
            <li class="nav-item">
              <a class="text-dark nav-link modal-title" id="terms-tab" data-toggle="pill" href="#terms" role="tab"
                aria-controls="terms" aria-selected="false">Terms <span class="d-none d-sm-inline-block">of
                  Service</span></a>
            </li>
          </ul>

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span class="font-4" aria-hidden="true">&times;</span>
          </button>
        </div>




        <div class="px-4 tab-content modal-body" id="tabContent">
          <div class="tab-pane fade show active text-left" id="privacy" role="tabpanel" aria-labelledby="privacy-tab">
            <h2 class="text-center">Option 1</h2>
          </div>
          <div class="tab-pane fade text-left" id="terms" role="tabpanel" aria-labelledby="terms-tab">
            <h2 class="text-center">Option 2</h2>
          </div>

        </div>


        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary">Agree</button>
        </div>
      </div>
    </div>
  </div>


  <div class="text-center alert alert-info alert-dismissible alert-fixed m-0" role="alert" id="textAlert">

    <button type="button" class="close " data-dismiss="alert"><span style="font-size:30px;" class=""
        aria-hidden="true">&times;</span></button>

    <strong>We use cookies!</strong> By continuing to use this site you're agreeing to our terms and privacy policy.<a
      href="#" data-toggle="modal" data-target="#privacyterms"> Learn more?</a>

    <button data-dismiss="alert" type="button" class="btn btn-secondary">I agree</button>

  </div>

</body>

</html>

【讨论】：

【解决方案2】：

我会使用 Bootstrap 提供的事件方法：

$('#privacyterms').on('show.bs.modal', function() {
    $('#cookieAlert').alert('close');
});

Demo

https://getbootstrap.com/docs/4.1/components/modal/#methods https://getbootstrap.com/docs/4.1/components/alerts/#methods

【讨论】：