Twitter Bootstrap modal: Slayt aşağı efekti nasıl kaldırılır

Twitter Bootstrap Modal pencere animasyonunu aşağı kaydırma efektinden fadeIn'e değiştirmenin veya yalnızca Slayt olmadan görüntülemenin bir yolu var mı? Buradaki belgeleri okudum:

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

Ancak kalıcı gövde slayt efektlerini değiştirmek için herhangi bir seçenekten bahsetmezler.

Sadece fademodal div'den sınıfı çıkarın.

Özellikle şunu değiştirin:

<div class="modal fade hide">

için:

<div class="modal hide">

GÜNCELLEME: bootstrap3 için hidesınıfa gerek yoktur.

Bootstrap tarafından kullanılan modeller, efektleri sağlamak için CSS3 kullanır ve bunlar modls container div'den uygun sınıfları ortadan kaldırarak kaldırılabilir:

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

Gördüğünüz gibi bu modal bir sınıfa sahiptir .fade, yani solmaya ayarlanmıştır ve .inyani içeri kayar. Yani kaldırmak istediğiniz efektle ilgili sınıfı kaldırın, ki bu durumda sadece .insınıftır.

Düzenleme: Sadece bazı testleri koştu ve öyle değil gibi görünüyor, .insınıf javascript tarafından eklenir, ancak o slideDown davranışını css ile şu şekilde değiştirebilirsiniz:

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

gösteri

Eğer modalın içeri kaydırmak yerine solmasını istiyorsanız (neden .fadeyine de denir ?) CSS dosyanızdaki veya doğrudan bootstrap.cssbununla sınıfın üzerine yazabilirsiniz :

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

Herhangi bir efekt istemiyorsanız, fadesınıfı kalıcı sınıflardan kaldırın .

Bu cevapların çoğunun bootstrap 2 için olduğuna inanıyorum. Bootstrap 3 için aynı sorunla karşılaştım ve düzeltmemi paylaşmak istedim. Bootstrap 2 için önceki yanıt gibi, bu hala bir donukluk solmaya yapacak, ancak DEĞİL slayt geçişi yapmak.

İş akışınıza bağlı olarak modals.less veya theme.css dosyalarını değiştirebilirsiniz. Eğer daha azıyla kaliteli bir zaman geçirmediyseniz, kesinlikle tavsiye ederim.

daha azı için aşağıdaki kodu bulun: MODALS.less

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

Sonra değiştirmek -25%için0%

Alternatif olarak, yalnızca css kullanıyorsanız aşağıdakileri bulabilirsiniz 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;
}

ve sonra değiştirmek -25%için 0%.

.modal.fadeKendi LESS stil sayfamdaki varsayılan stilleri geçersiz kılarak bunu çözdüm:

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

Bu, solmaya / solmaya animasyonunu korur, ancak yukarı / aşağı slayt animasyonunu kaldırır.

Ben slayt kaldırır ama solmaya bırakır en iyi çözüm aşağıdaki css bootstrap.css sonra çağrılan seçimlerinizi bir css dosyasında ekleyerek olduğunu

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

Slayt efektini de beğenmedim. Bunu düzeltmek için tek yapmanız gereken, top.modal.fade ve modal.fade.in için özniteliği aynı yapmaktır. top 0.3s ease-outGeçişlerde de çıkartabilirsiniz , ancak onu bırakmak zarar vermez. Bu yaklaşımı seviyorum çünkü solma giriş / çıkış çalışır, sadece slaytı öldürür .

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

Bir bootstrap 3 cevabı arıyorsanız, buraya bakın

"top: -25%;" komutunu kaldırarak bootstrap.css dosyasının üzerine de yazabilirsiniz.

kaldırıldıktan sonra, mod slayt animasyonu olmadan basitçe girip çıkacaktır.

Sadece solma sınıfını kaldırın ve Modal'da daha fazla animasyonun gerçekleştirilmesini istiyorsanız, Modal'ınızda animate.css sınıflarını kullanın.

Bootstrap 3 ve Durandal JS 2 mod eklentisi ile çalışıyorum. Bu soru Google sonuçlarının üstündeydi ve yukarıdaki yanıtların hiçbiri benim için çalışmadığından, çözümümü gelecekteki ziyaretçiler için paylaşacağımı düşündüm.

Kendi önyükleme ile varsayılan Bootstrap'ın daha az kodunu geçersiz kılar:

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

Bu şekilde sadece solma efekti ve slideDown ile kaldım.

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

Soru açıktı: sadece slaytı kaldırın : Bootstrap v3'te nasıl değiştireceğiniz aşağıda açıklanmıştır

Modals.less içinde translate deyimi yazın:

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

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

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

Bunu güncellemek istedim. Çoğunuz bu sorunu tamamlamadınız. Bootstrap 3 kullanıyorum. Yukarıdaki düzeltmelerin hiçbiri işe yaramadı.

slayt efektini kaldırmak ama solmaya devam etmek için. Bootstrap css'e girdim ve (aşağıdaki seçicileri not ettim) - bu sorunu çözdü.

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

Aşağıdaki CSS benim için çalışıyor - Bootstrap 3'ü kullanma. Bu css'yi boostrap stillerinden sonra eklemeniz gerekir -

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

.modal.fade {
   transition: none; 
}

sadece 'fade' sınıfını modal sınıftan kaldır

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

gibi

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