Отклонить Bootstrap предупреждение при отображении модального - PullRequest
Новая
       25

Отклонить Bootstrap предупреждение при отображении модального

1 голос
/ 15 апреля 2020

Используя последнюю версию bootstrap, я создал сообщение с фиксированным предупреждением со ссылкой, которая открывает модальное окно при нажатии. Модальное сообщение на экране, но предупреждение остается ОТКРЫТО.

Как я могу отключить предупреждение при всплывающем модале?

Я пытался использовать 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 = по ссылке, но, возможно, кто-то может использовать его, чтобы найти лучшее решение.

Спасибо за помощь!

Ответы [ 2 ]

2 голосов
/ 15 апреля 2020

Вы можете попробовать использовать событие модального шоу, предоставленное bootstrap, и попытаться отключить там предупреждающее сообщение.

Ниже вы найдете решение, которое может вам помочь. Я добавил обработчик '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>
1 голос
/ 15 апреля 2020

Я бы использовал методы событий Bootstrap обеспечивает: 

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

Демо

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

...