[팀 도토리#2] bootstrap을 활용하여 모달(Modal) 만들기

Step 1. bootstrap에서 원하는 모달 코드 가져오기

 

Step 1-1. 상단 Button trigger modal 코드에서 필요한 속성값 가져와서 태그에 삽입

 

data-bs-toggle="modal"

• 토글이란 두 가지 상태를 번갈아가며 전환하는 동작
• modal 타입의 토글로 지정
• 즉, 위의 코드는 버튼을 클릭하면 모달 형태로 전환

data-bs-target="#delCommentModal"

• delCommentModal이라는 id를 가지는 요소가 전환 대상

 

Step 1-2. 하단 modal 코드를 html 파일에 삽입

 

• 코드의 최상위 태그 id를 통해, 이 요소가 step 1-1 버튼 태그의 전환 대상이 되는 것을 알 수 있다.
• 최하단 버튼 태그 안에 id값을 지정해서, js 파일에서 이 버튼의 이벤트 핸들링이 가능하도록 한다.

---

Step 2. 모달의 버튼을 클릭했을 때, 해당 데이터가 삭제되도록 백엔드 코드 수정

 

이벤트 핸들러를 중첩해서 사용하면 모달을 거치더라도 삭제할 데이터의 id값을 삭제가 완료될 때까지 전달할 수 있다.

1차적으로 id="guestDelete"인 블록의 버튼을 클릭할 때 데이터를 전달받아, 삭제할 블록이 무엇인지 인식한다.

2차적으로 id="deleteCommentBtn"인 모달 버튼을 클릭할 때 내부 코드를 실행하여 해당 블록을 삭제한다.

 

---

결과물

삭제 버튼이 #guestDelete 에 해당하는 버튼이다

삭제하기 버튼이 #delCommentBtn 에 해당하는 버튼이다