<!-- modal 구동 버튼 (trigger) --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySmallModal"> 작은 Modal </button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 기본 Modal </button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myLargeModal"> 큰 Modal </button> <!-- 작은 Modal --> <div class="modal fade" id="mySmallModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">작은 Modal 제목</h4> </div> <div class="modal-body"> 작지 않아! </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button> </div> </div> </div> </div> <!-- 기본 Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">기본 Modal 제목</h4> </div> <div class="modal-body"> Size don't matter. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button> </div> </div> </div> </div> <!-- 큰 Modal --> <div class="modal fade" id="myLargeModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">큰 Modal 제목</h4> </div> <div class="modal-body"> 나는 관대하다 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button> </div> </div> </div> </div>