Cara Membuat Modal pada Bulma Framework

Modal adalah suatu kotak dialog yang muncul pada saat kita mengklik suatu tombol, pasti teman-teman pernah melihatnya di suatu website dimana pada saat teman-teman klik suatu tombol akan muncul kotak dialog yang berisi elemen html. Class modal adalah class yang disediakan oleh bulma untuk membuat suatu kotak dialog yang dimana kita bisa menggunakannya untuk menaruh konten-konten seperti konten form pendaftaran atau form login dan lain-lain. Pada artikel kali ini saya akan membahas bagaimana Cara Membuat Modal pada Bulma Framework.

Ok, langsung saja saya akan memberikan langkah-langkah bagaiman Cara Membuat Modal pada Bulma Framework:

1. Pertama

anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.

2. Kedua

anda ketikan kode html di bawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>Modal</title>
  <!--link ke css bulma-->
  <link rel="stylesheet" type="text/css" href="bulma-0.5.1/css/bulma.css">
  <link rel="stylesheet" type="text/css" href="bulma-0.5.1/css/bulma.css.map">
  <!--link ke font-awesome-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<p style="padding: 20px">
  <a class="button is-primary is-large modal-button" data-target="modal" id="mybtn">Click Me Please..</a>
</p>


<script src="bulma-0.5.1/docs/_javascript/bulma.js"></script>
<script src="bulma-0.5.1/docs/_javascript/main.js"></script>
<script src="bulma-0.5.1/docs/_javascript/index.js"></script>

</body>
</html>

Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

3. Ketiga

Kita akan membuat kotak dialognya menggunakan class modal, berikut kodenya

<div class="modal" id="mymodal">
  <div class="modal-background"></div>
  <div class="modal-content">

  <!--konten yang akan muncul saat tombol di klik-->
    <div class="box is-info" style="margin-top: 200px">
      <article class="media">
        <div class="media-left">

        <!--untuk image pada figure teman-teman bisa memasukan image teman-teman sendiri
            soalnya yang di pakai itu photo saya :D-->
          <figure class="image is-64x64">
            <img src="images/gilang.jpg" alt="Image">
          </figure>
          
        </div>
        <div class="media-content">
          <div class="content">
            <p>
              <strong>Pamugi Gilang</strong> <small>@ugi_gilang</small> <small>31m</small>
              <br>
              Cogliere la giornata o morire di rammarico per il tempo che hai perso
              Ãˆ vuoto e freddo senza di voi qui, troppe persone a soffrire
              Vedo la mia visione brucia, sento che i miei ricordi si dissolvono nel tempo
              Ma sono troppo giovane per preoccuparmi
              Queste strade che percorriamo subiranno il nostro stesso passato perso ~
            </p>
          </div>
          <nav class="level is-mobile">
            <div class="level-left">
              <a class="level-item">
                <span class="icon is-small"><i class="fa fa-reply"></i></span>
              </a>
              <a class="level-item">
                <span class="icon is-small"><i class="fa fa-retweet"></i></span>
              </a>
              <a class="level-item">
                <span class="icon is-small"><i class="fa fa-heart"></i></span>
              </a>
            </div>
          </nav>
        </div>
      </article>
    </div>
    <!--akhir dari konten-->

  </div>
  <button class="modal-close is-large" aria-label="close" id="btnclose"></button>
</div>

Kotak dialog atau modal di simpan diketikan di bawah tombol dan akan tampil apabila kita sudah menambahkan kode javascript.

4. Keempat

Karena di bulma belum tersedia javascript yang menjalankan modal tersebut, maka kita akan membuatnya, bikin lembar kerja baru dan masukan kode javascript berikut ini:

  var btn = document.getElementById('mybtn');
  var modal = document.getElementById('mymodal');
  var btnclose = document.getElementById('btnclose');

btn.onclick = function() {
  modal.style.display = "block";
}

btnclose.onclick = function(){
  modal.style.display = "none";
}

Setelah selesai mengetikan kodenya maka teman-teman save kode javascriptnya di folder _javascript yang terdapat dalam folder docs.

Lalu kita panggil modal.js dengan menggunakan kode di bawah ini:

<script src="bulma-0.5.1/docs/_javascript/modal.js"></script>

jangan lupa kita simpan scriptnya di paling bawah bersama file js yang lainnya.

Buka browser teman-teman lalu refresh file html yang telah kita buat tadi dan klik tombolnya maka kotak dialog/modal itu akan muncul

Class modal adalah class yang memudahkan kita mebuat suatu kotak dialog atau kotak yang berisi elemen-elemen html yang kita inginkan.

Dengan bulma kita dapat dengan mudah membuat kotak dialog/modal tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat kotak dialog/modal menggunakan class modal pada bulma.

Sekian pembahasan kali ini tentang Cara Membuat Modal pada Bulma Framework. Semoga bermanfaat.

Cara Membuat Modal pada Bulma Framework

Kategori