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


167

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

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

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

답변:


359

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

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

<div class="modal fade hide">

에:

<div class="modal hide">

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


9
OP는 페이드 인 방법을 요구했지만 그 대답 중 일부는 질문의 대체 형성에 맞습니다. 하나의 질문에 실제로 두 가지 질문이 있기 때문에 하나의 답변으로 두 질문에 모두 대답하지 않았기 때문에 나쁜 질문 일 것입니다.
umassthrower

1
부트 스트랩 소스를 수정할 필요가 없습니다. HTML 만 수정하면됩니다. 이것이 정답입니다.
mpccolorado

31
@umassthrower가 맞습니다. 전환이없는 방법 만 답변됩니다. 페이드하는 방법은 있지만 위에서 아래로 내려 가지 않는 문제는이 답변에서 다루지 않습니다.
Synesso

26
나는 이것이 정답인지 어떻게 알지 못한다 ... 그것은 모달이 사라지지 않고 나타나고 OP는 SLIDE를 제거하도록 요청했지만 FADE는 제거하지 않았다 ...
Shawn Taylor

2
페이드를 유지하고 슬라이드를 제거하기를 기다리고 있으며이 답변은 도움이되지 않습니다. 페이드가 CSS에서 완전히 분리되어 있기 때문에 페이드 클래스를 사용하여 모달의 슬라이드 효과를 처리하는 것은 이상한 부트 스트랩입니다.
Leeish

36

부트 스트랩이 사용하는 모달은 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;
}

데모


2
또한 배경에 추가해야합니다 modal.fade, .modal-backdrop.fade등등 ...
데이비드 헬싱에게

David가 언급 한 이유로 component-animations.less 파일을 편집하는 것이 좋습니다.
피터 핸리

fade 클래스는 선택 사항이며 Rose가 더 나은 (및 BS 문서에 따라 선호) 답변을 제공합니다
umassthrower

@umassthrower이 답변은 선택 시점이 존재하지 않았을 당시 글이 꽤 오래되었습니다.
Andres Ilich

BS 2.0이 답변 3 개월 전에 릴리스되어 의견이 정확한지 확실하지 않으며 지난 여름 v2.0을 사용할 때 모달에서 페이드를 제거했습니다. 아마도 그들은 그 이후까지 문서를 변경하지 않았을 것입니다. 던노
umassthrower

30

슬라이드 인이 아닌 모달 페이드 인을 원한다면 ( .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모달 클래스에서 클래스를 제거하십시오 .


1
최고 : 50 % 때 대화 상자가 닫히고 문제를 일으키는 것으로 보인다. 대화 상자가 이전과 같은 위치에 열려있는 것 같습니다. 그러나 닫히기 직전에 잠시 동안 중앙으로 이동 한 다음 닫힙니다. Chrome의 Atleast 다른 사람도 이것을 알아 차렸습니까?
mohitp

1
@lorem monkey-건배, 슬라이드가 아닌 페이드를 원했습니다. 누군가 scss / compass 버전을 원한다면 ... .modal.fade {@include transition (opacity .2s linear, none);}
Simon

1
@mohitp "top : 50 %"대신 "top : 25 %"를 사용하고 있습니다. 또한 .modal.fade.in {top : 25 %; } 나를 위해 속임수를 쓴 것 같습니다. 내 모달에 "in"클래스가 없기 때문에 왜 이것이 작동하는지 확실하지 않습니다.
Darren

2
@dkrape in클래스는 Bootstrap.js에 의해 추가
데이브 처짐

이것은 정답이며 질문의 두 부분에 모두 대답합니다.
matt

26

이 답변의 대부분은 부트 스트랩 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%.


2
부트 스트랩의 스타일 시트 /리스를 편집하는 대신 사용자 정의 스타일 시트에서 이러한 스타일을 재정의합니다.
Bassem

이것은 슬라이드없이 페이드를 얻는 유일한 CSS 솔루션입니다. 고마워.
davideghz

18

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

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

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


감사합니다. 나는 50 % 대신 10 %를 사용하여 전환을 .3에서 .25s로 줄였습니다.
isapir

모달을 여러 번 열고 닫으면 시간이 지남에 따라 페이지가 위로 이동합니다.
Leeish

12

슬라이드제거하지만 페이드를 떠나는 가장 좋은 해결책을 찾았습니다 .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;
}

1
이것은 페이드를 유지하면서 슬라이드를 아래로 제거하기 위해 Bootstrap 3에 가장 적합한 답변입니다.
NickH

2
이 솔루션은 Bootstrap 4에서도 잘 작동합니다. 감사!
aprovent

11

슬라이드 효과도 마음에 들지 않았습니다. 이 문제를 해결하려면 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 답변을 찾고 있다면 여기를보십시오.


1
위의 LESS 이외의 두 가지 예는 ".modal.fade.in"선언을 무시하여 닫는 순간 모달이 조금씩 움직입니다. 이것은 잘 작동합니다. 여기에 실제로 있습니다 : jsfiddle.net/dkrape/4EwFq
Darren

이것은 대부분 작동하지만 모달이 나타날 때 약 32px 위의 밝은 파란색 수평선이 (모든 Safari, Firefox 및 Chrome에서) 나타납니다.
Dave Sag

2

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

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


2

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


1

부트 스트랩 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은 남지 않습니다.


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

그러면 애니메이션이 표시되거나 숨겨지지 않습니다. Angular-Bootstrap ui에서도 잘 작동합니다.
SM Adnan

1

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

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

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


0

이것을 업데이트하고 싶었습니다. 대부분이 문제를 완료하지 않았습니다. 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)*/}

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; 
}

0

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

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

같이

class="modal bs-example-modal-lg"
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.