Cara Menggunakan Modal Twitter Bootstrap 3

Posted by 26 April 2014
Labels: , , ,
Twitter Bootstrap dapat dikatakan sebagai framework CSS yang paling populer dan banyak digunakan saat ini. Kehadirannya bukan hanya memanjakan para desainer, tapi juga meringankan pekerjaan para pengembang web (web developer) dalam membuat rancangan awal proyek yang akan disodorkan kepada klien mereka.

Sebutan framework CSS bagi Twitter Bootstrap mungkin kurang tepat, karena selain dilengkapi komponen-komponen CSS, ia dilengkapi pula dengan komponen-komponen Javascript seperti carousel, popover, dan modal.

Melalui artikel ini, saya akan menjelaskan secara sekilas bagaimana menggunakan komponen Javascript Twitter Bootstrap (versi 3.1.1) yang disebut terakhir; modal.

Apa itu Modal?

Istilah modal di sini tidak ada sangkut pautnya dengan uang atau komoditi seperti yang biasa digunakan dalam istilah-istilah ekonomi.

Dalam dunia pemrograman web, modal merupakan sejenis kotak dialog yang umumnya muncul ke tangah-tengah layar browser, berisi informasi-informasi yang dianggap kurang relevan jika harus disajikan di halaman utama aplikasi.

Contoh informasi pada kotak dialog ini adalah konfirmasi untuk memastikan apakah kita benar-benar akan keluar atau tidak dari aplikasi yang sedang digunakan ketika tombol berbunyi "Logout" atau "Keluar" diklik.

Kita dapat mengumpamakan modal ini dengan kotak dialog pengaturan cetak yang muncul di LibreOffice Writer, aplikasi pengolah kata pada sistem operasi berbasis Linux, saat kita menekan Ctrl + P pada papan ketik.

Modal biasanya muncul sesaat setelah kita mengeklik elemen-elemen tertentu dari aplikasi-aplikasi berbasis web yang sedang digunakan, seperti elemen taut (<a>), tombol (<button>), atau gambar (<img>). Modal dapat pula ditampilkan setelah aplikasi-aplikasi tersebut selesai di-load oleh browser.

Menyiapkan Twitter Bootstrap

Untuk dapat menggunakan komponen modal ini, kita tentu saja harus terlebih dulu mengunduh Twitter Bootstrap ini. Kita dapat mengunduhnya dari GitHub. File yang diunduh menggunakan format zip berukuran 2.5 MB.

Setelah Bootstrap berhasil diunduh, buatlah sebuah folder di komputer kita dengan nama, misalnya, mybootstrap.

Pada folder yang telah kita buat di atas, buatlah dua buah folder baru dengan nama css dan js serta satu buah file HTML dengan nama "index.html".

Salin file bootstrap.min.css (berada pada folder bootstrap-master/dist/css dari file yang telah diunduh) ke folder mybootstrap/css. Salin pula file bootstrap.min.js (berada pada folder bootstrap-master/dist/js dari file yang telah diunduh) ke folder mybootstrap/js.

Selanjutnya buka file index.html yang telah kita siapkan pada folder mybootstrap sebelumnya dengan text editor kesukaan Anda, kemudian tambahkan kode yang saya salin dari dokumentasi Bootsrap, dengan sedikit perubahan, di bawah ini.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Bootstrap Labz</title>
    
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>

  <body>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Click Me
    </button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>

          <div class="modal-body">
            Assalamualaikum, brad!
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
            <button type="button" class="btn btn-primary">Simpan</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Pada kode di atas, di antara tag <head> dan </head> kita menambahkan CDN jQuery, karena sebagai komponen Javascript, modal Bootstrap ini memerlukannya, meski untuk memunculkannya tidak harus selalu melalui Javascript. Pustaka jQuery ini dapat pula kita unduh di situs resminya jika kita berniat menggunakannya secara offline.

Silakan ganti bagian berbunyi "Modal title" dan "Assalamualaikum, brad!" dengan kata-kata Anda sendiri sesuai kebutuhan, kemudian buka file index.html tersebut di browser untuk melihat hasilnya.

Mengubah Ukuran Modal

Untuk mengubah ukuran modal, cukup tambahkan class modal-lg (untuk ukuran besar) atau modal-sm (untuk ukuran kecil) pada class modal-dialog seperti berikut.

<div class="modal-dialog modal-lg">


<div class="modal-dialog modal-sm">

Demikian tutorial singkat bagaimana menggunakan modal Twitter Bootstrap 3 yang bisa saya sajikan. Semoga bermanfaat.