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


부트스트랩 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