Блог

Главная - Вопросы по программированию - Модальный не отображается при загрузке страницы (с использованием bootstrap)

Модальный не отображается при загрузке страницы (с использованием bootstrap)

#bootstrap-4

#bootstrap-4

Вопрос:

на моем сайте я хочу показать сообщение об использовании файлов cookie с использованием Bootstrap modal. Тем не менее, модальный не отображается при загрузке страницы.

 <div class="modal fade show" id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="cookieModal" aria-hidden="">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <!-- <h5 class="modal-title" id="cookieTitle">Modal title</h5> -->
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">amp;times;</span>
          </button>
        </div>
        <div class="modal-body">
          <span>We use cookies to enhance user experience. See how we use <a href="assets/CookiesAndDisclaimer.pdf" target="_blank" class="text-dark">Cookies</a> and our<a href="assets/PrivacyStatement.pdf" class="ml-1 text-dark" target="_blank">Privacy policy</a> </span>
        </div>
        <!-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Agree</button>
        </div> -->
      </div>
    </div>
  </div>

Ответ №1:

Обязательно импортируйте jquery и popper.js к вашему досье. Модальный загрузчик работает, если эти скрипты присутствуют.

Кроме того, нам нужна кнопка, чтобы сделать видимым и невидимым.

 <!-- bootstrap import -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<div class="modal fade show  " id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="cookieModal" aria-hidden="">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="cookieTitle">Information </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">amp;times;</span>
          </button>
        </div>
        <div class="modal-body">
          <span>We use cookies to enhance user experience. See how we use <a href="assets/CookiesAndDisclaimer.pdf" target="_blank" class="text-dark">Cookies</a> and our<a href="assets/PrivacyStatement.pdf" class="ml-1 text-dark" target="_blank">Privacy policy</a> </span>
        </div>
        <!-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Agree</button>
        </div> -->
      </div>
    </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cookieModal">
  show
</button>

<!-- jquery and pooper.js import -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Комментарии:

1. Tedd, Техас. Он отображается при нажатии кнопки, но я все еще пытаюсь показать его при загрузке страницы.

2. это работает при добавлении этого скрипта <script> $ (document). готово(function(){ $(«#myModal»).modal(‘show’); }); </script>