Modal Bootstrap Twitter: Cara menghapus efek Slide down

Apakah ada cara untuk mengubah animasi jendela Bootstrap Modal Twitter dari efek slide ke fadeIn atau hanya tampilan tanpa Slide? Saya membaca dokumentasi di sini:

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

Tetapi mereka tidak menyebutkan opsi untuk mengubah efek slide body modal.

Keluarkan saja fadekelas dari modal div.

Secara khusus, ubah:

<div class="modal fade hide">

untuk:

<div class="modal hide">

UPDATE: Untuk bootstrap3, hidekelas tidak diperlukan.

Modals yang digunakan oleh bootstrap menggunakan CSS3 untuk memasok efek dan mereka dapat dihapus dengan menghilangkan kelas yang sesuai dari divas wadah modals:

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

Seperti yang Anda lihat, modal ini memiliki kelas .fade, artinya disetel untuk memudar dan .in, artinya akan meluncur. Jadi, cukup hapus kelas yang terkait dengan efek yang ingin Anda hapus, yang dalam kasus Anda hanyalah.in kelas.

Sunting: Hanya menjalankan beberapa tes dan tampaknya bukan itu masalahnya, .inkelas ditambahkan oleh javascript, meskipun Anda dapat memodifikasi perilaku slideDown dengan css seperti:

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

Demo

Jika Anda ingin modal memudar daripada slide dalam (mengapa disebut demikian .fade?) Anda dapat menimpa kelas dalam file CSS Anda atau langsung bootstrap.cssdengan ini:

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

Jika Anda tidak ingin ada efek, cukup hapus fadekelas dari kelas modal.

Saya percaya bahwa sebagian besar jawaban ini adalah untuk bootstrap 2. Saya mengalami masalah yang sama untuk bootstrap 3 dan ingin berbagi perbaikan saya. Seperti jawaban saya sebelumnya untuk bootstrap 2, ini masih akan memudar opacity, tetapi TIDAK akan melakukan transisi slide.

Anda dapat mengubah file modals.less atau theme.css, tergantung pada alur kerja Anda. Jika Anda belum menghabiskan waktu berkualitas dengan sedikit, saya akan sangat merekomendasikannya.

kurang, temukan kode berikut di MODALS.less

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

kemudian ubah -25%ke0%

Atau, jika Anda hanya menggunakan css, temukan yang berikut di 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;
}

dan kemudian ubah -25%ke 0%.

Saya memecahkan masalah ini dengan mengganti .modal.fadestyle default di stylesheet KURANG saya sendiri:

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

Ini membuat animasi fade in / fade out tetapi menghilangkan animasi slide up / slide down.

Saya telah menemukan solusi terbaik yang menghapus slide tetapi meninggalkan fade adalah dengan menambahkan css berikut ini dalam file css pilihan ponsel Anda yang dipanggil setelah 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;
}

Saya juga tidak suka efek slide. Untuk memperbaikinya, yang harus Anda lakukan adalah menjadikan topatributnya sama untuk .modal.fade dan modal.fade.in. Anda dapat melepas top 0.3s ease-outdalam transisi juga, tapi tidak ada salahnya untuk meninggalkannya. Saya suka pendekatan ini karena fade in / out berfungsi, itu hanya membunuh 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%;
}

Jika Anda mencari jawaban bootstrap 3, lihat di sini

Anda juga dapat menimpa bootstrap.css dengan hanya menghapus "top: -25%;"

sekali dihapus, modal hanya akan memudar masuk dan keluar tanpa animasi slide.

Hapus saja kelas fade dan jika Anda ingin lebih banyak animasi tampil di Modal gunakan saja kelas animate.css di Modal Anda.

Saya bekerja dengan bootstrap 3 dan plugin modal Durandal JS 2. Pertanyaan ini ada di atas hasil Google dan karena tidak ada jawaban di atas yang berfungsi untuk saya, saya pikir saya akan membagikan solusi saya untuk pengunjung masa depan.

Saya menimpa kode Kurang Bootstrap default dengan ini di saya sendiri kurang:

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

Dengan begitu saya dibiarkan dengan efek fade saja, dan tanpa slideDown.

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

Pertanyaannya jelas: hapus hanya salindia: Berikut ini cara mengubahnya di Bootstrap v3

Dalam modals.less komentar keluar pernyataan terjemahan:

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

lihat di http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-tapi-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;
}

Ingin memperbarui ini. Sebagian besar dari Anda belum menyelesaikan masalah ini. Saya menggunakan Bootstrap 3. tidak ada perbaikan di atas yang berhasil.

untuk menghapus efek slide tetapi tetap memudar. Saya pergi ke bootstrap css dan (perhatikan pemilih berikut) - ini menyelesaikan masalah.

 .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 berikut ini berfungsi untuk saya - Menggunakan Bootstrap 3. Anda harus menambahkan css ini setelah gaya boostrap -

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

.modal.fade {
   transition: none; 
}

hapus saja kelas 'fade' dari kelas modal

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

sebagai

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