부트스트랩 모달 창 사용하는 방법

Last Modified : 2017-10-26 / Created : 2017-05-12

19,983
View Count

주소 복사하기

부트스트랩의 모달 창을 사용하는 방법을 알아보려합니다.

부트스트랩 UI는 기본적으로 모달창을 플러그인 형태로 사용 가능합니다. 만약 부트스트랩 라이브러리가 추가되지 않은 경우 먼저 아래 링크에서 다운 추가하시기 바랍니다.

http://getbootstrap.com
http://v4-alpha.getbootstrap.com/components/modal/

# 모달창이란?

모달창은 브라우저의 별도창 또는 탭 윈도우와는 다른 내부 레이어로 만들어진 윈도우입니다. 관련성이 적은 콘텐츠를 별도 UI에서 보여주는 매우 자주 사용되는 방법입니다. 아래의 링크에서 더 자세한 정보를 얻으세요~

모달창 링크 바로가기 >
http://webisfree.com/2016-03-24/%EC%9B%B9%EC%97%90%EC%84%9C-%EB%AA%A8%EB%8B%AC%EC%B0%BD%EA%B3%BC-%ED%8C%9D%EC%97%85%EC%B0%BD%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

# 부트스트랩을 사용한 모달창 추가하기

부트스트랩은 아래와 같은 속성을 해당 태그에 추가하는 방법으로 열 수 있습니다. 또한 제어하는 메소드가 있습니다. 아래는 필요한 속성들입니다.

data-toggle
data-target

위 속성을 버튼 영역에 추가합니다. 추가된 모습은 아래와 같습니다.

<button class="btn btn-toggle" data-toggle="modal" data-target="#myModal">Show / Hide<button>

아래는 모달창 내부 콘텐츠에 사용되야할 속성과 클래스입니다.

role="modal"
class="modal fade"

위 속성을 사용한 실제 코드에 적용된 모습입니다. 그럼 아래는 실제 모달창이 적용된 코드예제입니다.

<button class="btn btn-toggle" data-toggle="modal" data-target="#myModal">Show / Hide<button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body">
        Hello! Webisfree.com
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

부트스트랩의 모달창은 아래의 메소드를 사용하여 제어합니다.

modal()

보시는 것처럼 modal() 메소드 하나만으로 모달창을 컨트롤합니다. 실제 적용시 스크립트에 아래와 같이 사용합니다.

$('#myModal').modal("toggle");
// 반대로 모달상태를 전환함

$('#myModal').modal("hide");
// 모달창 열기

$('#myModal').modal("show");
// 모달창 닫음

이처럼 매우 간단하며 가장 간단한 메소드를 지원합니다.

참고로, 모달창 중앙정렬을 위한 방법은 아래 링크에서 확인하세요 !!

부트스트랩 중앙정렬 바로가기 > http://webisfree.com/?id=327

부트스트랩 모달 modal uib

아래의 글도 찾고 계시지 않나요?

부트스트랩(Bootstrap)에서 padding값을 없애는 css가 있나요?

부트스트랩에서 uibCollapse 사용하는 방법