Question

使用最新的引导程序，我创建了一个带有链接的固定警报消息，该消息在单击时会打开一个模式。屏幕上显示模式POPS-UP，但警报保持打开状态。

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

我尝试使用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，但也许有人可以使用它来提出更好的解决方案。

感谢您的帮助！

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

Answer 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

显示模态时关闭Bootstrap警报

2 个答案: