18.1~18.3 웹 페이지에서 댓글 수정하기(게시판 만들기 / 길벗 코딩 자율학습단)

모달

• 웹에서 새 창을 띄우는 팝업 창과 달리 같은 브라우저 내부에서 상위 레이어를 뜨우는 방식으로 사용하는 창
• 모달 창이 뜨면 기존 창은 비활성 사애가 됨
• 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있음

 

댓글 수정하기(2단계)

1. 모달 기능을 이용해 모달 창에 수정 폼 만들기
2. 모달 트리거 버튼을 통해 기존 댓글을 가져와 수정 폼에 반영한 후 REST API 요청 보내기

 

트리거 데이터 전달

모달 트리거 버튼에 data-*속성을 이용하면 데이터를 모달로 전달 가능

1. 모달 트리거 버튼에 수정할 댓글 정보를 data-*속성 값으로 저장
2. show.bs.modal 이벤트를 감지해 핸들러에서 모달 트리거 버튼을 변수화
3. 버튼 변수(triggerBtn)를 이용해 data-*속성에 담긴 댓글 정보를 가져옴
4. 수정 폼에 데이터를 반영

 

모달 이벤트 감지

• 모달은 열리기 직전 show.bs.modal 이벤트를 발생시키고 이를 처리할 함수는 발생한 이벤트를 첫 번째 매개변수로 받아 실행

요소명.addEventListener("show.bs.modal", function(event){
});