<!-- modal 구동 버튼 (trigger) --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySmallCenterModal"> Small Center </button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my80sizeCenterModal"> 80%size Center </button> <!-- Small Modal at Center --> <div class="modal modal-center fade" id="mySmallCenterModal" tabindex="-1" role="dialog" aria-labelledby="mySmallCenterModalLabel"> <div class="modal-dialog modal-sm modal-center" 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"> Modal 내용 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button> </div> </div> </div> </div> <!-- 80%size Modal at Center --> <div class="modal modal-center fade" id="my80sizeCenterModal" tabindex="-1" role="dialog" aria-labelledby="my80sizeCenterModalLabel"> <div class="modal-dialog modal-80size modal-center" 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"> Modal 내용 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button> </div> </div> </div> </div>
.modal-dialog.modal-80size { width: 80%; height: 80%; margin: 0; padding: 0; } .modal-content.modal-80size { height: auto; min-height: 80%; } .modal.modal-center { text-align: center; } @media screen and (min-width: 768px) { .modal.modal-center:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-dialog.modal-center { display: inline-block; text-align: left; vertical-align: middle; }