Implementasi Modals Pada Framework Materialize

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

Yaitu kita akan implementasikan modal di materialize, modal lazim sering kita bikin dengan menggunakan bootstrap. Bukan hanya bootstrap tetapi framework materialize ini pun telah menyediakan pop up modal dan kita tinggal menggunakannya saja. Di latihan kali ini kita akan membangun dua macam pop up modal yaitu modal default dan Bottom Sheet Modals.

• Modal default yakni modal standar yang lazim kita bikin namun yang berbeda dari modal ini yakni di ketika modal tampil terlihat ada efeknya sehingga membangun blog lebih interaktif.




• Bottom Sheet Modals efek lain dari modal default, di ketika di klik modal akan muncul dari bottom

Dari kedua macam modal di atas ini kita akan coba membuatnya, karenanya dari itu simak terus artikel mengenai Implementasi Modals Pada Framework Materialize ini. Di implementasi kali ini saya akan memberikan content pada modal, yaitu sebuah form input. Seketika saja kita implementasikan, teman – teman siapkan file materialize nya dan ketikkan script html nya di bawah ini di 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 bagi 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, jikalau telah save dan jalankan di browsernya karenanya akan menghasilkan output seperti gambar di bawah ini

Berikutnya kita bikin Bottom Sheet Modals, dengan cara menambahkan class bootom-sheet

Save dan refresh di browser nya, lalu klik button modal

Karenanya pop up modal akan muncul dari bawah, begitulah cara membangun sebuah modal di materialize. Teman – teman dapat coba sendiri dari hasil latihan kali ini. Sekianlah di artikel kali ini mengenai Implementasi Modals Pada Framework Materialize kita jumpa kembali di artikel yang akan datang. Terimakasih dan hingga Jumpa.

Semoga bermanfaat 🙂

Sumber https://kursuswebsite.org