Mengubah Animasi dan Tampilan Modal Bootstrap 3

Bagi web developer, bootstrap menjadi salah satu library CSS idaman untuk proses development di tahap Front End. Mulai dari grid system yang mudah diterapkan, element-element seperti input, select option, checkbox, dll dan tak pula modal. Element modal ini banyak digunakan untuk proses view detail, bahkan transaksi CRUD.

Menggunakan bootstrap bukan berarti "pasrah" desain kita sesuai default bootstrap bukan ? Adakalanya kita ingin UI/UX web app menjadi lebih menarik, tidak melulu dengan tampilan standar apalagi kita pun sebagai developer terutama Front End pasti merasa agak bosan. Jadi, jika bisa disesuaikan selera dan kebutuhan kenapa tidak ?

Jika teman-teman memiliki style desain web app cenderung ke single-page, dan ingin mengubah default modal, simak langkah berikut :

1. Tentunya masukkan link css dan js bootstrap ke file .html
2. Buat file .css baru dengan nama mystyle.css atau sesuai keinginan
3. Edit dengan IDE favorit :)
4. Sisipkan file mystyle.css tadi ke .html
5. Lalu tambahkan baris kode berikut :

.modal.fade .modal-dialog {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    top: 25% !important; //Ubah persentase untuk memindah posisi modal-dialog
    opacity: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: scale(1);
    opacity: 1;
}

6. Buat element modal di file html masing-masing, referensi modal boostrap 3 bisa dilihat di : https://getbootstrap.com/docs/3.3/javascript/#modals
7. Lihat hasilnya di browser, maka modal bootstrap yang awalnya memiliki animasi turun ke bawah akan berubah
8. Ingin menambah background agar fokus ke modal, tambahkan kode berikut :
.modal {
    background: red; //Sesuaikan warna ini
}

Hasilnya kurang lebih seperti berikut :