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

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

---

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

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

This keeps the fade in / fade out animation but removes the slide up / slide down animation.

---

I didn't like the slide effect either. To fix this all you have to do is make the the top attribute the same for both .modal.fade and modal.fade.in. You can take off the top 0.3s ease-out in the transitions too, but it doesn't hurt to leave it in. I like this approach because the fade in/out works, it just kills the slide.

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

If you're looking for a bootstrap 3 answer, look here

---

I have found the best solution that removes the slide but leaves the fade is by adding the following css in a css file of your chosing which is invoked after the bootstrap.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;
}

---

you can also overwrite bootstrap.css by simply removing "top:-25%;"

once removed, the modal will simply fade in and out without the slide animation.

---

Just remove the fade class and if you want more animations to be perform on the Modal just use animate.css classes in your Modal.

---

I'm working with bootstrap 3 and the Durandal JS 2 modal plugin. This question was on top of Google results and as none of the answers above is working for me I thought I'd share my solution for future visitors.

I override the default Bootstrap's Less code with this in my own less:

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

That way I am left with only the fade effect, and no slideDown.

---

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

---

The question was clear: remove only the slide: Here is how to change it in Bootstrap v3

In modals.less comment out the translate statement:

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

---

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

---

Wanted to update this. Most of you have not completed this issue. I'm using Bootstrap 3. none of the fixes above worked.

to remove the slide effect but keep the fade in. I went into bootstrap css and (noted out the following selectors) - this resolved the issue.

 .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)*/}

---

The following CSS works for me - Using Bootstrap 3. You need to add this css after boostrap styles -

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

.modal.fade {
   transition: none; 
}

참고URL : https://stackoverflow.com/questions/10143444/twitter-bootstrap-modal-how-to-remove-slide-down-effect