Bootstrap :: Modal 활용하는 방법

HTML,홈페이지,웹,개발,프로그래밍언어,자바스크립트(JS),Jquery)제이쿼리,웹,팝업,모달

팝업보단 모달을 쓰자!

일반적으로 우리가 웹페이지를 이용하다 보면 자주 볼 수 있는 화면이 있는 팝업과 함께 모달이 존재합니다. 저의 경우 처음 HTML이라는 것을 접했을 때는 팝업(pop-up)을 이용하여 어떤 필요한 정보를 출력을 하였는데 우리가 인터넷을 쓰다 보면 팝업창이 뜨면 내용을 정확히 보지도 않고 닫거나 불편하고 여러모로 크게 좋진 않아 어떻게 하면 좋을까 고민을 하다 모달(modal)이라는 것을 알게 되었습니다. 그래서, 여러분에게 팝업과 모달의 차이점에 대해서 간단히 알아보고 모달 사용방법에 대해서 알아보도록 하겠습니다.

목차

모달(Modal) VS 팝업(pop-up)

팝업(pop-up)

우선, 팝업의 경우 쉽게 이야기하면 창(페이지)이 하나 더 생긴다는 것입니다 그리고닌깐 예를 들어 나의 사이트에 팝업을 생성하면 메인 홈페이지 창에서 팝업 창이 하나 더 생기는 것입니다. 예전에는 팝업 사용이 많긴 많았지만 현재는 선호하는 스타일은 아닙니다.

모달(modal)

기존 브라우저에 새로운 창이 나오게 되는 것이 아닌  레이어 형식으로 화면으로 나오는 것을 바로 모달이라고 하는 것입니다. 요즘은 해당 모달을 이용하여 많이 사용을 하는 경우가 많습니다.

모달 사용하기

모달을 사용하기 위해 우선 버튼 하나를 먼저 생성을 합니다, 버튼을 누르면 나오게 되도록 한번 해보려고 합니다. 모달을 구현한 후 저장을 하고 다시 실행을 합니다.

우선, 버튼을 누르면 레이어가 나오게 되면서 설정된 내용과 함께 주위 배경은 흐림(검은) 화면으로 변경이 되고 해당 모달을 종료하려면 모달 외 위치를 누르게 되면 사라지게 됩니다.

        <!--Modal 시작 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-odinbox">모달 해보자(OdinBOX)</button>

<div class="modal fade bd-example-modal-odinbox" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-odinbox">
    <div class="modal-content">
      <p>혁신을 이룹니다, 오딘박스</p>
    </div>
  </div>
</div>
        <!--Modal 끝 -->

모달에도 기본적인 HTML과 비슷하게 header(헤더), body(본문), footer(푸터)등이 있고 각 해당하는 영역은 이름에서 알고 있듯이 시작과 본문 내용 끝 이렇게 보면 될 것 같습니다. 해당 모달을 활용하면 원하는 위치에 타게팅이 되는 행동을 할 수 있다는 것이 가장 좋은 장점이 있는 것 같습니다.

작은사이즈	.modal-sm	300px
보통	없음	500px
큰 사이즈	.modal-lg	800px
매우 큰 사이즈	.modal-xl	1140px

모달과 관련한 더욱 자세한 사항은 부트스트랩에서 지원하는 공식 문서[#]를 참고하시면 더욱 편리합니다. 저 또한 공식 문서를 참고하면서 많음 도움을 받고 있습니다.