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

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

트위터 부트스트랩 모달 창 애니메이션을 슬라이드 다운 효과에서 페이드 인 또는 슬라이드 없이 그냥 디스플레이로 변경할 수 있는 방법이 있습니까?설명서를 여기에서 다 읽었습니다.

http://getbootstrap.com/javascript/ #모달

하지만 그들은 모달 바디 슬라이드 효과를 변경하기 위한 어떤 옵션도 언급하지 않았습니다.

그냥 꺼내면 됩니다.fade모달 디브로부터의 클래스.

구체적으로 변경:

<div class="modal fade hide">

대상:

<div class="modal hide">

---

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

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

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

보다시피 이 모달에는 다음과 같은 클래스가 있습니다..fade그것이 페이드 인으로 설정되어 있다는 것을 의미합니다..in미끄러져 들어갈 거라는 뜻입니다., 이 따서제거효클제됩면니거다하를래다해니이당됩경당우만에신는의스클래라스하려는련관된과와▁the▁related▁just▁so▁you▁class다▁the▁effect니됩해▁in..in학생들

편집: 방금 몇 가지 테스트를 실행했는데 그렇지 않은 것 같습니다..in클래스는 Javascript에 의해 추가되지만 다음과 같이 CSS를 사용하여 slideDown 동작을 수정할 수 있습니다.

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

데모

만약 당신이 미끄러지는 것보다 모달을 페이드 인으로 하고 싶다면 (왜 그것을 부르나요?.fade 파일에 있는 나 직접 파일에 수 .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를 한다면, 을 또만 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 내 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두 .vmdk 모두에 대해 동일한 속성을 부여합니다.페이드 및 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 답을 찾고 있다면 여기를 보세요.

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

또한 "top:-25%;"를 제거하여 bootstrap.dll을 덮어쓸 수도 있습니다.

제거되면 슬라이드 애니메이션 없이 모드가 페이드 인/아웃됩니다.

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

저는 부트스트랩 3과 듀란달 JS 2 모달 플러그인으로 일하고 있습니다.이 질문은 Google 결과의 맨 위에 있었고 위의 답변 중 아무 것도 제게 도움이 되지 않기 때문에 저는 미래의 방문자들을 위해 제 솔루션을 공유하려고 생각했습니다.

기본 Bootstrap의 Less 코드를 나만의 Less 코드로 덮어씁니다.

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

그래야 페이드 효과만 있고 슬라이드 다운은 없습니다.

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

질문은 명확했습니다. 슬라이드만 제거하십시오.부트스트랩 v3에서 변경하는 방법은 다음과 같습니다.

modals.less에서는 translate 문에 대해 설명합니다.

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

모달 클래스에서 'modal' 클래스를 제거합니다.

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

~하듯이

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

업데이트하려고 합니다.여러분 대부분은 이 문제를 완료하지 못했습니다.저는 부트스트랩 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는 나에게 효과가 있습니다 - 부트스트랩 3 사용.부스트랩 스타일 뒤에 이 css를 추가해야 합니다.

.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