Cara Membuat Modal Bottom Dengan Framework Materialize

Apa itu Materialize,,?

Materialize adalah framework html dan css juga dilengkapi dengan Javacsript, jadi tidak heran output yang di hasilkan sangatkan keren. Pembuatan template website parallax juga bisa di buatnya dengan framework ini. Hampir sama dengan framework html css lainnya, seperti bootstrap misalkan. Pengkodean Materialize pun juga lebih simple di bandingkan dengan bootstrap namun yang lebih populer adalah bootstrap karena memang sudah ada sebelum Materialize. Kedepannya mungkin Materialize juga akan populer di kalangan web development karena sangat menarik fitur – fitur nya. Pada kesempatan kali ini saya akan mencoba memberikan tips dan trik Cara Membuat Modal Bottom Dengan Framework Materialize, pada saat di klik maka modal atau pop up akan muncul dari bottom atau bawah monitor. Berikut ini adalah screen shoot nya yang nanti kita akan buat

Maka ketika klik kirim data modal akan muncul, sebelum memulai teman – teman download terlebih dahulu di website resminya http://materializecss.com/

Hingga mendapatkan file seperti gambar di bawah ini

Kemudian copy script untuk index.html nya di website resminya dan save dalam satu folder, teman – teman klik Getting Started
dan temukan script seperti di bawah ini

Langkah berikutnya kita akan implementasikan Cara Membuat Modal Bottom Dengan Framework Materialize, copy script di bawah ini

<div class="container">  
      <div class="row">
          <div class="col m12">
             <!-- Modal Trigger -->
              <a class="waves-effect waves-light btn" href="#modal">Kirim Data</a>
              <!-- Modal Structure -->
              <div id="modal" class="modal bottom-sheet">
                <div class="modal-content">
                  <h3>Apakah Anda sudah Jelas Dengan Persyaratan Kami</h3>
                </div>
                <div class="modal-footer">
                  <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
                </div>
              </div>
          </div>
        </div>
    </div>

Dan paste di dalam tag <body>, berikutnya kita berikan Javascript dan Jquery nya

<script type="text/javascript">
    (function($){
      $(function(){
        $('.button-collapse').sideNav();
        $('.parallax').parallax();
        $('#modal').modal({
            dismissible: true,
            opacity: .5,
            inDuration: 300,
            outDuration: 200,
            startingTop: '4%',
            endingTop: '10%',
            ready: function(modal, trigger) {
              console.log(modal, trigger);
            },
          });
      });
    })(jQuery);
    </script>

Tambahkan script di atas ini tepat di bawah tag tutup container

Jika sudah, save dan jalankan pada browser nya. Maka hasilnya seperti gambar di bawah ini

Ketika di klik pada button maka pop up modal akan muncul dari bottom

Mudah sekali bukan..??

Baik, cukup sekian pada artikel kali ini tentang Cara Membuat Modal Bottom Dengan Framework Materialize kita jumpa lagi di artikel berikutnya. Semoga bermanfaat 🙂

Termakasih dan Sampai Jumpa.

Cara Membuat Modal Bottom Dengan Framework Materialize

Kategori