Belajar Materialize #17 : Cara membuat Modal pada Materialize

Belajar Materialize #17 : Modal pada Materialize – Hai “sahabat kodingin” sampai berjumpa di belajar materialize menggunakan bahasa Indonesia. Sekarang kita memasuki tutorial materialize yang ke -17.

Modal pada Materialize

Pada seri ke 17 ini, kita akan membahas “cara menggunakan modal pada Materialize”.

Banyak website di Indonesia maupun luar negeri banyak menggunakan fitur ini, Fitur populer banyak digunakan untuk memenuhi kebutuhan interaksi manusia dengan komputer.

Jangan bingung ya tentang “apa itu modal” ?

Bukan Modal untuk memulai bisnis namun modal pada materialize.

Apa Itu Modal ?

Sebelum membahas lebih jauh mengenai modal materialize, kita harus paham pengertian modal materialize pada halaman website.

Modal adalah salah satu komponan materialize yang banyak digunakan untuk membuat webste, Modal berbentuk sebuah Pop Up / Elemen yang melayang.

Penggunaan modal tergantung kebutuhan website kita, salah satu contohnya untuk menampilkan halaman input login maupun register.

“Keuntungan menggunakan modal materialize” yaitu pengujung tidak membutuhkan waktu lama untuk menuju halaman yang di inginkan.

Modal akan di tampilkan ketika pengguna melakukan aksi, sebagai contoh aksi link, baik menggunakan class link maupun tombol / button.

Cara Membuat Modal pada Materialize

Komponen modal pada materialize menggunakan class .modal.

Komponan yang terdapat di dalam modal ada 2 yaitu untuk kontennya sendiri dan untuk bagian footer.

Yuk Langsung saja implementasikan.

Berikut ini contoh menggunakan modal materialize.

Perhatikan kode diatas, untuk memunculkan modal menggunakan sebuah button yang telah di instance pada jquery. Artinya kita membuat link ke dalam sebuah class konten yang ada di konten modal yang sesungguhnya.

Kode link di atas menuju id dengan nama #modal1. Maka secara alur kerja link tersebut untuk mengarahkan ke dalam id yang di tentukan.

Ketika kita tidak menggunakan modal seharusnya id modal1 satu akan muncul dan ketika di klink link modal1 akan menggeser ke elemen id tersebut.

Berhubung kita menggunakan .class modal maka secara langsung elemen modal tidak di munculkan. Elemen akan di munculkan ketika sudah menginstance nama class nya, hal itu di tandai dengan kode jquery yang telah kita buat.

Sekarang Mari Kita lihat hasilnya.

Cara Membuat Modal pada Materialize
Cara Membuat Modal pada Materialize

Tampilan GIF di atas menjunkkan bahwa kita sudah berhasil menampilkan elemen modal ketika sudah meng klik tombol link.

Methods / Metode Modal pada Materialize

Contoh penggunaan modal di atas merupakan cara menggunakan modal secara default / bawaan.

Kita dapat mengubahh beberapa varian cara menampilkan modal maupun hal-hal yang berkaitan dengan modal.

Ketika kita menggunakan Jquery dapat menggunakan contoh potongan kode berikut.

Di kutip dari materialize.com, berikut ini pilihan method untuk menggunakan variasi modal.

Modal pada Materialize
Modal pada Materialize
  • opacity
  • inDuration
  • outDuration
  • onOpenStart
  • onOpenEnd
  • onCloseStart
  • onCloseEnd
  • preventScrolling
  • dismissible
  • startingTop
  • endingTop

Format menggunakan variasi modal nya yaitu nama method di ikuti dengan paramater nilai yang kita inginkan.

Berikut ini contoh lengkap menggunakan method pada modal materialize.

Perhatikan kode diatas, pada kode script jquery saya membahkan method dismissible dengan nilai false dan opacity dengan nilai 0.7.

Maka, ketika modal maka ketika kita mengklik modal tidak akan keluar dan mempunyai nilai transparasi yang besar, artinya terlihat samar pada elemen di bawah modal.

Sekarang kita lihat hasilnya.

Cara Membuat Modal pada Materialize
Cara Membuat Modal pada Materialize

Gambar GIF di atas menujukan bahwa yang kita tuliskan kode nya benar , sehingga opaticynya mempunyai nilai yang berbeda / artinya bertambah dan tidak dapat keluar saat di klik.

Kesimpulan…

Akhirnya kita sudah berhasil “menggunakan modal pada materialize”. Komponen modal pada materialize menggunakan class .modal. Sebenarnya class modal itu bisa diganti dengan class lain ketika kita mendeifinisikan modal pada Jquery.

Hal yang penting ketika menggunakan method pada modal, pastikan anda menuliskan method name yang ada biar tidak menimbulkan kesalahan.

Baca Juga…

Avatar
Didik
Saya Seorang Developer khususnya pada Bidang Website menggunakan Sistem Operasi Linux dan menyukai Pemrograman Website dan System Administrator. Selain itu saya pemilik website kodingin.com.

2 Comments

  1. […] Belajar Materialize #17 : Cara membuat Modal pada Materialize […]

  2. […] Belajar Materialize #17 : Cara membuat Modal pada Materialize […]

Leave a Reply