[Django] 팝업창 / 모달창 적용

팝업창(Popup) : 현재 창 외에 다른 새 창 띄우기

모달(Modal) : 팝업과 비슷하게 사용자에게 정보를 보여주거나 추가 작업을 유도하지만 일시적인 화면을 띄어주는 것

인스타그램 새 게시물 작성을 모달로 띄어주려고 한다.

 

모달을 구현하기 위해서는 Javascript 를 사용하면 된다.

이때 그냥 script 를 써도 되고 Jquery를 써도 된다.

 <!-- Jquery -->
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

추가하려면 사용해주고

 

모달 관련된 css

/* 게시글 모달 */
      .modal_overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
         z-index: 9999; /* 모달을 항상 최상위로 설정 */
    }
     .modal_window {
        background: white;
        backdrop-filter: blur(13.5px);
        -webkit-backdrop-filter: blur(13.5px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        width: 800px;
        height: 600px;
        position: relative;
        padding: 10px;
    }
      .modal_title{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-weight: bold;
          font-size: 20px;
      }

      .modal_title_side{
          flex: 0 0 40px;
          text-align: center;
      }

모달 html

<!-- 게시물 모달 -->
    <div id="modal_add_feed" class="modal_overlay">
        <div class="modal_window">
          <div class="modal_title">
                <div class="modal_title_side"></div>
                <div> 새 게시물 </div>
                <div class="modal_title_side">
                    <span id="close_modal" class="material-icons-outlined">
                        close
                    </span>
                </div>
            </div>
        </div>
    </div>

모달 script

<script>
      const modal = document.getElementById("modal_add_feed");
      const buttonAddFeed = document.getElementById("nav_bar_add_box");

      buttonAddFeed.addEventListener("click", e => {
        modal.style.display = "flex";
        document.body.style.overflow = "hidden"
        document.body.classList.add("modal_open");
      });

      // 모달 닫기 코드
      const buttonCloseModal = document.getElementById("close_modal");
      buttonCloseModal.addEventListener("click", e => {
          modal.style.display = "none";
          document.body.style.overflowY = "visible";
      });
      // 모달 빈 곳 선택하면 닫기
      modal.addEventListener("click", e => {
        if (e.target === modal ) {
          modal.style.display = "none";
          document.body.classList.remove("modal_open");
          document.body.style.overflowY = "visible";
        }
      });
    </script>