bootstrap modal창 위에 또다른 modal창 띄우는 코드

모달창 위에 또다른 모달창을 띄워야 하는 경우는 수없이 많습니다.

프로그래밍을 하다보면...

한번의 창으로 보통은 끝나지 않지요.

뭔가 설정을 할때 창을 띄우고 또다른 선택을 할때 주로 화면에 띄워주는 것이 좋기때문이지요.

이러한 것을 코드로 구현한다면 아래와 같이 하면 좋겠네요.

Bootstrap 모달 창 위에 또 다른 모달 창을 띄우는 것은 비추천됩니다. 

이것은 사용자 경험을 해치고, 모달 창의 의도를 왜곡시키기 때문입니다.

대신, 모달 창 내에서 새로운 모달 창을 열 수 있도록 설계하는 것이 좋습니다. 

이를 위해 다음과 같은 코드를 사용할 수 있습니다.

<!-- 첫번째 모달 창 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="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">
        <p>모달 내용</p>
        <!-- 두번째 모달 창 열기 버튼 -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">두번째 모달 창 열기</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
      </div>
    </div>
  </div>
</div>

<!-- 두번째 모달 창 -->
<div class="modal fade" id="modal2" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="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">
        <p>모달 내용</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
      </div>
    </div>
  </div>
</div>

 

이 코드에서는 첫번째 모달 창 안에 두번째 모달 창을 열 수 있는 버튼을 추가하였습니다. 

두번째 모달 창은 첫번째 모달 창 안에서 열리므로 사용자 경험을 해치지 않습니다.

 

실행하면, 아래와 같은 결과물을 볼 수 있지요.

푸른 버튼을 클릭하면...?

정상적으로 모달창 위에 모달창이 뜨는 것을 볼 수 있습니다.

코드가 그리 복잡하진 않아서 다행이네요.

모달위에 또 모달....

할 수 있네요^^