>source

부트 스트랩 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

  • 답변 # 1

    The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal. [source]

    Vanilla JavaScript를 통해 사용하는 방법

    Create a modal with a single line of 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/[email protected]/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 요소입니까?

  • 답변 # 2

    모달의 새 인스턴스를 만든 다음 show 메서드를 호출합니다 (사용 지점 참조).

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

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

    참고 : Bootstrap v5는 더 이상 jquery를 사용하지 않고 대신 javascript를 사용합니다. 부트 스트랩 v5에는 많은 변경 사항이 있습니다. 회사에서 일하고 있고 부트 스트랩 v5를 사용하려는 경우 모든 변경 사항을 검토하십시오.

관련 자료

  • 이전 javascript - puppeteerjs - chrome 백그라운드 메시지 제거
  • 다음 c++ - std - : size의 사용자 과부하?