Bootstrap V5 вручную вызывает модальный myModal.show () не работает (vanilla javascript) - PullRequest
Новая
       27

Bootstrap V5 вручную вызывает модальный myModal.show () не работает (vanilla javascript)

0 голосов
/ 10 июля 2020

Какой правильный способ вручную вызвать модальное окно в bootstrap 5?

Я хочу показать модальное окно, когда страница открыта. Я пробовал это:

мой модальный 

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        ... 
        ... 
        ... 
    </div>
  </div>
</div>

мой скрипт 

var myModal = document.getElementById('myModal');
document.onreadystatechange = function() {
   
    myModal.show();
}

, но получил эту ошибку в журнале консоли: 

 myModal.show is not a function
    at HTMLDocument.document.onreadystatechange

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Модальный плагин переключает ваш скрытый контент по запросу, через атрибуты данных или JavaScript. Он также добавляет .modal-open к, чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop, чтобы предоставить область щелчка для отклонения отображаемых модальных окон при щелчке за пределами модального. [источник]

Как использовать через Vanilla JavaScript

Создайте модальное окно с единственной строкой JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

источник

Быстрый пример: 

var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
document.onreadystatechange = function () {
  myModal.show();
};
<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />


    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
      crossorigin="anonymous"
    />
    <title>Hello, world!</title>
  </head>
  <body>

    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- JavaScript and dependencies -->
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
      crossorigin="anonymous"
    ></script>

    <script src="./app.js"></script>
  </body>
</html>

Что касается вашего кода, вы не следовали правильному пути для отображения / переключения модального окна в Vanilla JavaScript. Почему вы ожидали, что myModal.show() произойдет, а myModal - просто элемент DOM?

1 голос
/ 10 июля 2020

  1. Создайте новый экземпляр модального окна, а затем вызовите метод show (см. Пункты использования)

    var myModal = new bootstrap .Modal (document.getElementById ('exampleModal')) myModal.show ()

enter image description here

ref: https://v5.getbootstrap.com/docs/5.0/components/modal/#options

примечание: Bootstrap v5 больше не использует jquery, вместо этого использует javascript. В bootstrap v5 внесено множество изменений, если вы работаете в компании и хотите использовать Bootstrap v5, пожалуйста, go внесите все изменения.

...