<!-- modal 구동 버튼 (trigger) --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myFullsizeModal"> Fullsize Modal </button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my80sizeModal"> 80%size Modal </button> <!-- Fullsize Modal --> <div class="modal fade" id="myFullsizeModal" tabindex="-1" role="dialog" aria-labelledby="myFullsizeModalLabel"> <div class="modal-dialog modal-fullsize" role="document"> <div class="modal-content modal-fullsize"> <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> <!-- 80% size Modal --> <div class="modal fade" id="my80sizeModal" tabindex="-1" role="dialog" aria-labelledby="my80sizeModalLabel"> <div class="modal-dialog modal-80size" role="document"> <div class="modal-content modal-80size"> <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-dialog.modal-fullsize { width: 100%; height: 100%; margin: 0; padding: 0; } .modal-content.modal-fullsize { height: auto; min-height: 100%; border-radius: 0; } .modal-dialog.modal-80size { width: 80%; height: 80%; margin: 0; padding: 0; } .modal-content.modal-80size { height: auto; min-height: 80%; }