Implementasi Modals Pada Framework Materialize

Halo teman – teman semuanya, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya dalam pembahasan tips dan trik seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Implementasi Modals Pada Framework Materialize yang mana pada artikel ini kita melanjutkan pembahasan mengenai framework css materialize.

Yaitu kita akan implementasikan modal pada materialize, modal biasa sering kita buat dengan menggunakan bootstrap. Bukan hanya bootstrap tetapi framework materialize ini juga sudah menyediakan pop up modal dan kita tinggal menggunakannya saja. Pada latihan kali ini kita akan membuat dua macam pop up modal yaitu modal default dan Bottom Sheet Modals.

• Modal default adalah modal standar yang biasa kita buat namun yang berbeda dari modal ini adalah pada saat modal tampil terlihat ada efeknya sehingga membuat website lebih interaktif.
• Bottom Sheet Modals efek lain dari modal default, pada saat di klik modal akan muncul dari bottom

Dari kedua macam modal di atas ini kita akan coba membuatnya, maka dari itu simak terus artikel tentang Implementasi Modals Pada Framework Materialize ini. Pada implementasi kali ini saya akan memberikan content dalam modal, yaitu sebuah form input. Langsung saja kita implementasikan, teman – teman siapkan file materialize nya dan ketikkan script html nya di bawah ini pada file index.html

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
  <div id="modal1" class="modal">
    <div class="modal-content">
	  <div class="row">
	    <form class="col s12">
	      <div class="row">
	        <div class="input-field col s6">
	          <input id="icon_prefix" type="text" class="validate">
	          <label for="icon_prefix">First Name</label>
	        </div>
	        <div class="input-field col s6">
	          <input id="icon_telephone" type="tel" class="validate">
	          <label for="icon_telephone">Telephone</label>
	        </div>
	        <div class="input-field col s12">
	          <input id="icon_telephone" type="tel" class="validate">
	          <label for="icon_telephone">Telephone</label>
	        </div>
	        <div class="input-field col s12">
	          <textarea id="textarea1" class="materialize-textarea"></textarea>
	          <label for="textarea1">Messages</label>
	        </div>
	        <div class="input-field col s12">
	          <button class="btn" type="submit">Save</button>
	        </div>
	      </div>
	    </form>
	  </div>    
    </div>
  </div>

Kemudian tambah kan script javascript nya untuk menjalankan modal nya

<script type="text/javascript"><br> $(document).ready(function(){<br> $('.modal').modal();<br> });<br></script>

Letakkan tepat di bawah link materialize.min.js, jika sudah save dan jalankan pada browsernya maka akan menghasilkan output seperti gambar di bawah ini

Selanjutnya kita buat Bottom Sheet Modals, dengan cara menambahkan class bootom-sheet

Save dan refresh pada browser nya, lalu klik button modal

Maka pop up modal akan muncul dari bawah, begitulah cara membuat sebuah modal pada materialize. Teman – teman bisa coba sendiri dari hasil latihan kali ini. Sekian pada artikel kali ini tentang Implementasi Modals Pada Framework Materialize kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai Jumpa.

Semoga bermanfaat

The post Implementasi Modals Pada Framework Materialize appeared first on Kursus Website Terbaik.