오른쪽에서 부트 스트랩 모달을 여는 방법?

Question

부트 스트랩 모달을 전체 창 높이로 가져 와서 사이드 바처럼 오른쪽에서 열려고합니까? 오른쪽 정렬되어야 함을 의미합니다.

어떻게하면됩니까?

Answer 1

오른쪽에서 표시하려면 모달에 CSS 클래스 right을 추가하여이 (Fiddle에서 영감을 얻은) 방법입니다.

.modal.fade:not(.in).right .modal-dialog { 
 
    -webkit-transform: translate3d(25%, 0, 0); 
 
    transform: translate3d(25%, 0, 0); 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div id="myModal" class="modal fade right"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;<span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Modal body</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal from the right</a>