[VanilaJs] 게시판 만들기 (2) - Modal창 마크업 및 동작

vue.js를 사용했을 때 처럼 모달창을 재사용이 가능한 단독적인 템플릿으로 작성하고 싶었다.

html안에서 html을 부르는 방법은 여러가지가 있었는데, 제일 안정적이라 판단한 js의 XMLHttpRequest객체를 사용해보았다.

 

먼저 modal.html 파일을 생성하고 마크업 부분은 아래와 같다.

<div class="modal" role="dialog" style="top: 10%;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">글 등록</h5>
        <i class="fa-solid fa-xmark" onclick="modalClose()" style="cursor: pointer;"></i>
      </div>
      <div class="modal-body">
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="제목" aria-label="제목" aria-describedby="basic-addon1">
        </div>
        <textarea class="form-control" placeholder="내용" aria-label="With textarea" rows="10"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-secondary" onclick="modalClose()">Close</button>
      </div>
    </div>
  </div>
</div>

 

 

index.html

index.html에 모달을 활성화 할수있는 버튼과,

모달이 활성화 됐을때 그림자를 담당하는 영역,

모달창 html을 불러오는, 영역을 추가해 주었다.

 

w3-include-html 속성을 참고하며 js부분을 확인해 보겠다.

w3school에서 퍼온 html파일 로드부분을 추가해주었다.

 

function modalOpen() {
  document.getElementsByClassName("modal-backdrop")[0].style.display = "block";
  document.getElementsByClassName("modal")[0].style.display = "block";
}

function modalClose() {
  document.getElementsByClassName("modal-backdrop")[0].style.display = "none";
  document.getElementsByClassName("modal")[0].style.display = "none";
}

모달창이 활성화/비활성화 되는 부분을 추가해주었다.

 

 

 

참고자료

https://getbootstrap.com/docs/4.0/components/modal/#live-demo

Modal

 

https://www.w3schools.com/howto/howto_html_include.asp

How To Include HTML

 

https://kyung-a.tistory.com/18

일반 HTML 파일에 HTML include/imports 하는 방법

 

전체소스

https://github.com/Jo-App/vanillaJs_Board/tree/board-2

GitHub - Jo-App/vanillaJs_Board