Modal Bootstrap Twitter: Cara menghapus efek Slide down

Jawaban:

359

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.

— Rose Perrone
sumber
9
Meskipun OP memang menanyakan bagaimana cara membuatnya pudar sehingga beberapa jawaban itu benar untuk pembentukan alternatif dari pertanyaan itu. Kira itu hanya pertanyaan yang buruk karena itu benar-benar 2 pertanyaan dalam satu dan tidak ada yang menjawab kedua pertanyaan dalam satu jawaban.
— umassthrower
1
Anda tidak perlu mengubah sumber bootstrap. Anda hanya perlu memodifikasi html Anda. Ini jawaban yang benar.
— mpccolorado
31
@umassthrower benar. Hanya bagaimana agar tidak ada transisi dijawab. Pertanyaan tentang bagaimana memudar tetapi tidak drop-down dari atas tidak tercakup oleh jawaban ini.
— Synesso
26
Saya tidak mengerti bagaimana ini adalah jawaban yang benar ... itu membuat modal muncul tanpa pudar, dan OP telah meminta untuk menghapus SLIDE, tetapi bukan FADE ...
— Shawn Taylor
2
Saya menunggu untuk tetap pudar dan menghapus slide juga dan jawaban ini tidak membantu. Bootstrap aneh menggunakan kelas fade mereka untuk juga menangani efek slide untuk modal karena fade sepenuhnya terpisah dalam CSS mereka.
— Leeish
36

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

— Andres Ilich
sumber
2
Anda juga harus menambahkannya ke latar belakang: modal.fade, .modal-backdrop.fadedll ...
— David Hellsing
mungkin lebih baik mengedit file komponen-animations.less, karena alasan yang disebutkan David.
— Peter Hanley
kelas fade adalah opsional, ada jawaban yang lebih baik (dan lebih disukai per dokumentasi BS) oleh Rose di bawah ini
— umassthrower
@umassthrower jawaban ini cukup lama, pada saat penulisan pilihan itu tidak ada.
— Andres Ilich
Saya tidak yakin komentar itu benar karena BS 2.0 dirilis 3 bulan sebelum jawaban itu dan saya menghapus fade dari modals saya ketika menggunakan v2.0 musim panas lalu. Mungkin mereka tidak mengubah dokumentasi sampai setelah itu. Tidak tahu
— umassthrower
30

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.

— monyet lorem
sumber
1
Bagian atas: 50% tampaknya menyebabkan masalah ketika dialog ditutup. Dialog tersebut tampaknya dibuka di tempat yang sama seperti sebelumnya; tetapi sesaat sebelum menutup, untuk sepersekian detik ia bergerak ke tengah dan kemudian menutup. Atleast di Chrome. Adakah orang lain yang memperhatikan hal ini juga?
— mohitp
1
@lorem monyet - sorakan, ingin pudar tetapi tidak meluncur. Jika ada yang menginginkan versi scss / kompas ... .modal.fade {@sertakan transisi (opacity .2s linier, tidak ada);}
— Simon
1
@mohitp Alih-alih "top: 50%", saya menggunakan "top: 25%". Saya juga menambahkan .modal.fade.in {top: 25%; } Tampaknya telah melakukan trik untuk saya. Tidak yakin mengapa ini berhasil karena saya tidak memiliki kelas "dalam" di modal saya.
— Darren
2
@dkrape, inkelas ditambahkan oleh Bootstrap.js
— Dave Sag
Ini adalah jawaban yang tepat, menjawab kedua bagian pertanyaan.
— matt
26

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

— kejelasan
sumber
2
Saya akan mengganti gaya ini dalam stylesheet khusus alih-alih mengedit stylesheet / Kurang Bootstrap.
— Bassem
ini adalah solusi CSS HANYA sederhana untuk mendapatkan FADE tanpa slide. Terima kasih.
— davideghz
18

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.

— Alex Bain
sumber
Terima kasih. Saya akhirnya menggunakan 10%, bukannya 50%, dan mengurangi transisi dari .3s menjadi .25s yang tampaknya sedikit lebih lancar bagi saya.
— isapir
Membuka dan menutup modal beberapa kali memindahkannya ke atas halaman seiring waktu.
— Leeish
12

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;
}
— justinazz
sumber
1
Ini adalah jawaban terbaik untuk Bootstrap 3 untuk menjaga agar tidak pudar tetapi singkirkan slide
— NickH
2
Solusi ini berfungsi dengan baik untuk Bootstrap 4 juga. Terima kasih!
— persetujuan
11

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

— kejelasan
sumber
1
Dua contoh non-KURANG di atas mengabaikan deklarasi ".modal.fade.in", yang membuat modal sedikit melompat pada penutupan. Ini bekerja dengan baik. Ini dia dalam praktiknya: jsfiddle.net/dkrape/4EwFq
— Darren
Ini sebagian besar bekerja tetapi saya melihat garis horizontal biru terang muncul (di semua Safari, Firefox dan Chrome) sekitar 32px di atas Modal saya ketika muncul.
— Dave Sag
2

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

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

— Amr Morsy
sumber
2

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

— Kapil Kumar
sumber
1

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.

— David
sumber
1 
.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
— SM Adnan
sumber
Itu akan menghapus animasi dari tampilan dan persembunyian. Bekerja dengan baik untuk saya dengan Angular-Bootstrap ui juga.
— SM Adnan
1

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%);
— Derry Birkett
sumber
0

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)*/}
— tmarois
sumber
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; 
}
— Ignacio Vazquez
sumber
0

hapus saja kelas 'fade' dari kelas modal

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

sebagai

class="modal bs-example-modal-lg"
— Abeysinghe
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.