Twitter Bootstrap Modal Slide in

Twitter Bootstrap 모달을 브라우저 창 상단에서 빠르게 이동하여 페이드 인하는 대신에 얻을 수있는 방법을 아는 사람이 있습니까?Twitter Bootstrap Modal Slide in

나는 this link을보고 있었지만, 페이드보다는 슬라이드를 전달하는 방법을 알 수 없었다.

미리 도움을 주셔서 감사합니다. w3resource 예 클래스 "의"# 예제의 DIV에 추가 된

.modal-backdrop.fade { 
    opacity: 0; 
} 
.modal-backdrop, .modal-backdrop.fade.in { 
    opacity: 0.8; 
} 
.modal { 
    background-clip: padding-box; 
    background-color: #FFFFFF; 
    border: 1px solid rgba(0, 0, 0, 0.3); 
    border-radius: 6px 6px 6px 6px; 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    left: 50%; 
    margin: -250px 0 0 -280px; 
    max-height: 500px; 
    overflow: auto; 
    position: fixed; 
    top: 50%; 
    width: 560px; 
    z-index: 1050; 
} 
.modal.fade { 
    top: -25%; 
    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s; 
} 
.modal.fade.in { 
    top: 50%; 
}

출처

2013-04-25 Tom Pinchen

경우 '.fade'를 실행 한 다음, 부트 스트랩을 초기화하는 동시에 DOM에 추가하지 않도록하십시오 (setTimeout을 사용하여 다음 틱에서 부트 스트랩을 지연 시키십시오). –

Simon에게 감사 드려요.이게 의미가 있습니다. 설정이 안된다는 것을 확신합니다. –

문제 :

나는 순간에 다음과 같은 CSS를 가지고있다. 당신이 클래스 "의"를 제거 경우는

<div class="container"> <h2>Example of creating Modals with Twitter Bootstrap</h2> <div id="example" class="modal hide fade" style="display: none; "> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>This is a Modal Heading</h3> </div> <div class="modal-body"> <h4>Text in a modal</h4> <p>You can add some text here.</p> </div> <div class="modal-footer"> <a href="#" class="btn btn-success">Call to action</a> <a href="#" class="btn" data-dismiss="modal">Close</a> </div> </div> <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p> </div>

는 Bootply에서 작업 ... 당신은 위로부터의 슬라이드를 예상대로 작동합니다 : http://www.bootply.com/60158 당신의 요소는 이미 클래스가

출처

2013-04-27 11:03:46 ZimSystem

굉장히 감사합니다. Skelly! 나 또한 Bootlely가 이것을 공유해 주셔서 고마워했기 때문에 존재하지 않았다. :) –

Twitter Bootstrap Modal Slide in

답변

관련 문제