부트 스트랩 모달 오픈 트랜지션 효과를 변경하는 방법은 무엇입니까?

-2

부트 스트랩 모달 오픈 이펙트를 변경하고 싶습니다. 기본 효과가 좋지 않습니다.부트 스트랩 모달 오픈 트랜지션 효과를 변경하는 방법은 무엇입니까?

변경할 방법이 있습니까?

또한 상단의 중앙에 모달을 열고 싶습니다.

2016-10-14 Sudhanshu sharma

내가 가장 쉬운 방법을 찾았습니다. 그냥 아래 CSS를 추가하여.

.modal.fade .modal-dialog { 
-webkit-transform: scale(0.1); 
-moz-transform: scale(0.1); 
-ms-transform: scale(0.1); 
transform: scale(0.1); 
top: 300px; 
opacity: 0; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
transition: all 0.3s; 
} 

.modal.fade.in .modal-dialog { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    -webkit-transform: translate3d(0, -300px, 0); 
    transform: translate3d(0, -300px, 0); 
    opacity: 1; 
}

출처

2016-10-14 10:29:02

먼저 누구의 링크 css 링크

부트 스트랩 아래에 당신이 두 가지 CSS의 클래스, 즉 .modal.fade 및 modal.in있어

.modal.fade이 모달의 초기 상태를 나타내는 스타일 시트를 필요

.modal.in은 뷰포트에 들어갈 때 모달의 최종 상태를 나타냅니다.

다음 스타일 시트에 아래 코드를 붙여 넣으십시오.

아래 코드를 복사하여 동작을 조정하면됩니다.

.modal.fade .modal-dialog { 
 
    -webkit-transition: -webkit-transform .3s ease-out; 
 
     -o-transition:  -o-transform .3s ease-out; 
 
      transition:   transform .3s ease-out; 
 
    -webkit-transform: translate(0, 100%) rotate(180deg) !important; 
 
     -ms-transform: translate(0, 100%) rotate(180deg) !important; 
 
     -o-transform: translate(0, 100%) rotate(180deg) !important; 
 
      transform: translate(0, 100%) rotate(180deg) !important; 
 
} 
 
.modal.in .modal-dialog { 
 
    -webkit-transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important; 
 
     -ms-transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important; 
 
     -o-transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important; 
 
      transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Test</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <!-- Button trigger modal --> 
 
     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
     Launch demo modal 
 
     </button> 
 

 
     <!-- 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">&times;</span></button> 
 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       ... 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       <button type="button" class="btn btn-primary">Save changes</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </body> 
 
</html>

출처

2016-10-14 09:39:54 MEAbid

의견을 남기지 않습니까? –

메모 모드가 뷰포트의 중간에 위치하게하려면'.modal.in' 클래스에서'translate (0, 50 %)'를'translate (0, 100 %)'로 변경하십시오. – MEAbid

http://dixso.github.io/custombox/ 여기 을 도움을받을 수는 단계 현명한 explaination에게 효과

출처

2016-10-14 09:47:03

중심 모달 주신

.anil { 
 
    transform: scale(0); 
 
    opacity: 0; 
 
    -webkit-transition: all 1s linear;/*opening speed*/ 
 
    -o-transition: all 1s linear;/*opening speed*/ 
 
    transition: all 1s linear;/*opening speed*/ 
 
} 
 

 
.anil.in { 
 
    opacity: 1; 
 
    transform: scale(1);/*size of the div to scal after .in class attached on opening modal*/ 
 
} 
 
.modal { 
 
     top:30%!important; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Centered with animation</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal anil" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div>

출처

2016-10-14 10:27:54

코드가 작동하지 않습니다 –

데모를 전체 페이지 모드로 실행하십시오. 게시하기 전에 테스트 해 봤습니다. 스크롤 막대가 압축 모드로 표시되지만 모바일 전체 모드 브라우저에서는 괜찮을 것입니다. –

부트 스트랩 모달 오픈 트랜지션 효과를 변경하는 방법은 무엇입니까?

답변

관련 문제