트위터 부트 스트랩 모달 : 슬라이드 다운 효과를 제거하는 방법

Twitter 부트 스트랩 모달 창 애니메이션을 슬라이드 다운 효과에서 페이드 인으로 변경하거나 슬라이드가없는 디스플레이로 변경하는 방법이 있습니까? 나는 여기 문서를 읽었습니다.

http://getbootstrap.com/javascript/#modals

그러나 모달 바디 슬라이드 효과를 변경하는 옵션은 언급하지 않았습니다.

fade모달 div에서 수업을 꺼내십시오 .

구체적으로 다음을 변경하십시오.

<div class="modal fade hide">

에:

<div class="modal hide">

업데이트 : bootstrap3의 경우 hide클래스가 필요하지 않습니다.

부트 스트랩이 사용하는 모달은 CSS3를 사용하여 효과를 제공하며 모달 컨테이너 div에서 적절한 클래스를 제거하여 제거 할 수 있습니다.

<div class="modal hide fade in" id="myModal">
   ....
</div>

보시다시피이 모달의 클래스는 .fade페이드 인 및로 설정되어 .in있음을 의미합니다. 즉, 슬라이드하려는 효과와 관련된 클래스를 제거하십시오.이 경우 .in클래스 는 클래스입니다.

편집 : 그냥 몇 가지 테스트를 실행했는데 그렇지 않은 것처럼 보입니다. .in클래스가 자바 스크립트로 추가되었지만 CSS로 slideDown 동작을 수정할 수는 있습니다.

.modal.fade {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

데모

슬라이드 인이 아닌 모달 페이드 인을 원한다면 ( .fade어쨌든 왜 호출 됩니까?) CSS 파일에서 클래스를 덮어 쓰거나 다음 bootstrap.css과 같이 직접 입력 할 수 있습니다 .

.modal.fade{
    -webkit-transition: opacity .2s linear, none;
    -moz-transition: opacity .2s linear, none;
    -ms-transition: opacity .2s linear, none;
    -o-transition: opacity .2s linear, none;
    transition: opacity .2s linear, none;
    top: 50%;
}

효과를 원하지 않으면 fade모달 클래스에서 클래스를 제거하십시오 .

이 답변의 대부분은 부트 스트랩 2에 대한 것이라고 생각합니다. 부트 스트랩 3에 대해 동일한 문제가 발생하여 수정 사항을 공유하고 싶었습니다. 부트 스트랩 2에 대한 이전 답변과 마찬가지로 이것은 불투명도 페이드를 수행하지만 슬라이드 전환은 수행하지 않습니다 .

워크 플로우에 따라 modals.less 또는 theme.css 파일을 변경할 수 있습니다. 적은 시간으로 양질의 시간을 보내지 않았다면 강력히 추천합니다.

간단히, 다음 코드를 찾으십시오. MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}

다음 변경 -25%에0%

또는 CSS 만 사용하는 경우 다음에서 다음을 찾으십시오 theme.css.

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

다음 변경 -25%에 0%.

.modal.fade내 자신의 LESS 스타일 시트에서 기본 스타일 을 재정 의하여이 문제를 해결했습니다 .

.modal {
  &.fade {
    .transition(e('opacity .3s linear'));
    top: 50%;
  }
  &.fade.in { top: 50%; }
}

페이드 인 / 페이드 아웃 애니메이션은 유지하지만 슬라이드 업 / 슬라이드 다운 애니메이션은 제거합니다.

슬라이드 를 제거하지만 페이드를 떠나는 가장 좋은 해결책을 찾았습니다 .bootstrap.css 후에 호출되는 선택의 CSS 파일에 다음 CSS를 추가하는 것입니다

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;

    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

슬라이드 효과도 마음에 들지 않았습니다. 이 문제를 해결하려면 top.modal.fade 및 modal.fade.in 모두에 대해 속성을 동일 하게 설정하면 됩니다. top 0.3s ease-out트랜지션에서도 이륙 할 수는 있지만 그것을 넣는 것은 아프지 않습니다. 페이드 인 / 아웃이 작동하기 때문에이 접근법을 좋아합니다 . 슬라이드를 죽 입니다.

.modal.fade {
  top: 20%;
  -webkit-transition: opacity 0.3s linear;
     -moz-transition: opacity 0.3s linear;
       -o-transition: opacity 0.3s linear;
          transition: opacity 0.3s linear;
}

.modal.fade.in {
  top: 20%;
}

부트 스트랩 3 답변을 찾고 있다면 여기를보십시오.

단순히 "top : -25 %;"를 제거하여 bootstrap.css를 덮어 쓸 수도 있습니다.

일단 제거되면 모달은 슬라이드 애니메이션없이 페이드 인 및 페이드 아웃됩니다.

페이드 클래스를 제거하고 모달에서 더 많은 애니메이션을 수행하려면 모달에서 animate.css 클래스를 사용하십시오.

부트 스트랩 3 및 Durandal JS 2 모달 플러그인으로 작업하고 있습니다. 이 질문은 Google 검색 결과 상단에 있었으며 위의 답변 중 어느 것도 효과가 없으므로 앞으로 방문자를 위해 솔루션을 공유 할 것이라고 생각했습니다.

나는 기본 Bootstrap의 Less 코드를 내 자신의 less로 재정의합니다.

.modal {
  &.fade .modal-dialog {
    .translate(0, 0);
    .transition-transform(~"none");
  }
  &.in .modal-dialog { .translate(0, 0)}
}

그렇게하면 페이드 효과 만 남고 slideDown은 남지 않습니다.

.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

문제는 분명합니다 : 슬라이드 만 제거하십시오 : 다음은 Bootstrap v3에서 슬라이드를 변경하는 방법입니다

modals.less에서 translate 문을 주석 처리하십시오.

&.fade .modal-dialog {
  //   .translate(0, -25%);

볼 http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

이것을 업데이트하고 싶었습니다. 대부분이 문제를 완료하지 않았습니다. Bootstrap 3을 사용하고 있습니다. 위의 수정 사항 중 아무것도 작동하지 않았습니다.

슬라이드 효과를 제거하지만 페이드 인을 유지합니다. 부트 스트랩 CSS에 들어가서 (다음 선택기 참고 사항)-문제가 해결되었습니다.

 .modal.fade .modal-dialog{/*-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out*/}

 .modal.in .modal-dialog{/*-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)*/}

다음 CSS가 나를 위해 작동합니다-Bootstrap 3 사용. boostrap 스타일 뒤에이 CSS를 추가해야합니다-

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}

모달 클래스에서 'fade'클래스를 제거하십시오.

class="modal fade bs-example-modal-lg"

같이

class="modal bs-example-modal-lg"