부트스트랩5 - 페이지 로드 시 모달창(팝업창) 띄우기

 

 

1. 내가 원하는 조건은 팝업창을 띄우고 뒤에 화면이 클릭이 안되게 하는 것

2. 버튼 클릭 말고 페이지 로드 시 바로 모달창이 뜨게 하는 것

 

이 두가지 !!

 

 

 

1번에 해당하는 조건은 부트스트랩에서

 

"정적 백드롭" 을 써야한다.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

 

 

나는 버튼을 안 쓸거니까 버튼은 제거 ㄱ ㄱ!

 

 

 

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

 

 

여기서 정적 백드롭에 해당 되는 부분은

 

 

 data-bs-backdrop="static" data-bs-keyboard="false"

 

이 부분인것 같다! 

 

 

 

기본 코드에서 저 부분만 추가하니까 구현이 됐음!!

 

 

 

 

 

<script>

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

myModal.show()

</script>

 

그리고 스크립트에 이 두줄만 추가해주면 완성~~~

 

 

 

 

 

정상적으로 작동한다!

 

 

그럼 끝

 

 

 

https://getbootstrap.kr/docs/5.0/components/modal/#%EC%9D%B4%EB%B2%A4%ED%8A%B8

모달