안녕하세요. 명월입니다. 이 글은 부트스트랩에서 팝업, 즉 모달에 관한 글입니다. 웹 서비스를 작성하다보면 페이지의 화면 전환이 아닌 팝업, 새로운 창을 열어야 하는 경우가 있습니다. 기존 바닐라 자바스크립트인 Window.open으로도 팝업을 만들 수는 있습니다. 그러나 Window.open으로 연 팝업은 팝업이긴 한데 새로운 윈도우창을 생성한 것이라 자바스크립트로 제어하기에는 한계가 있습니다. 그래서 예전에 레이아웃 팝업이라고, 새로운 윈도우가 아닌 웹 페이지 안에서 열리는 팝업이 있습니다. 이것이 부트스트랩에서는 모달이라 불립니다. 부트스트랩 3.x - https://getbootstrap.com/docs/3.4/javascript/#modals 부트스트랩 4.x - https://getbootstrap.com/docs/4.3/components/modal/ 먼저 모달의 기본 형태는 다음과 같습니다. ※참고로 제 블로그의 부트스트랩 버전은 3.x이기 때문에 3.x만 구현 결과를 만들 수 있습니다.
사실 이 modal의 경우는 3.x와 4.x는 크게 다르지 않습니다. 달라봐야 세부 클래스명 정도입니다. 전체적인 구조는 비슷합니다만, 그래서 4.x를 사용하시는 분은 위 링크로 들어가서 한번 확인해주세요. 위 소스의 예제는 태그로서 data-toggle과 data-target의 값으로 모달 박스를 Open하고, close버튼의 data-dismiss=modal 명령어로 모달 박스를 Close했습니다. 아, 위 x버튼도 data-dismiss=modal이 있습니다. 이번에는 자바스크립트로 모달을 제어하겠습니다.
위 소스에서 버튼의 id에 모달 open의 이벤트를 걸었고 취소에는 모달이 닫히는 이벤트를 걸었습니다. 보통은 여기까지만 사용해도 무난하긴 한데 모달 동작에 이벤트를 걸어서 사용하고 싶을 때도 있습니다.
사실 모달은 더 많은 기능이 있습니다. 위 예제는 모달 내용이 정적으로 html에 적혀있지만 내용 부분을 동적으로 활용하는 방법이나 실행하면 뒤 배경이 어둡게 되어 modal이 되지만 팝업처럼 modeless기능도 있습니다. 아래 링크로 가셔서 참고하시면 됩니다. 부트스트랩 3.x - https://getbootstrap.com/docs/3.4/javascript/#modals 부트스트랩 4.x - https://getbootstrap.com/docs/4.3/components/modal/ 여기까지 부트스트랩에서 팝업, 즉 모달 박스에 관한 내용였습니다. 궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다. |