Bootstrap

Modal Bootstrap: Bootstrap Tutorial #19

Pada tutorial ke 19 kali ini, masih membahas mengenai bootstrap yaitu tentang sebuah komponen yang belakangan ini sangat banyaj digunakan pada website – website modern. Komponen ini adalah Modal.

Modal yang dimaksud ini bukan modal dalam artian keuangan tetapi modal dalam bootstrap adalah sebuah komponen yang berbentuk pesan pop up yang akan ditampilkan melayang/menutupi komponen website lainnya.

Saya yakin teman – teman telah banyak menemui komponen satu ini, biasanya komponen ini digunakan untuk menampilkan notifikasi. Tetapi kegunaannya bukan hanya itu saja, kita dapat kombinasikan dengan mrnambahkan form atau tabel didalamnya. Singkat nya kita dapat menggabungkan modal bootstrap ini dengan komponen lainnya sesuai keperluan dari tampilan website yang sedang kita buat.

Dasar Modal Bootstrap

Perhatikan program dibawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Modal Example</h2>
    <!-- Button to Open the Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Open modal
    </button>

    <!-- The Modal -->
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            Modal body..
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>

        </div>
      </div>
    </div>

  </div>

  </body>
</html>

Penjelasan:

Untuk membuat modal terdapat 2 komponen penting yaitu pemicu dan aksi. Dalam contoh diatas saya menggunakan button untuk pemicu dan aksinya adalah menampilkan modal.

  • Pada tag button terdapat attribut data-toggle="modal" dan data-target="#myModal". Kegunaan dari attribut ini adalah data-toggle="modal" untuk menampilkan modal tanpa menggunakan javascript (baca: Bootstrap Doc), biasanya atribut ini digunakan bersamaan dengan data-target="#myModal" yang kegunaannya untuk memberitahu bootstrap mana elemen yang akan dibuka (dalam contoh diatas akan membuka komponen yang memiliki id=”myModal”).
  • Modal sendiri dibuat dengan memasukkan class .modal diikuti dengan id dari modal dalam tag <div>.
  • Class .modal-dialog digunakan untuk membuat area yang akan diisi dengan konten dari modal itu sendiri
  • Class .modal-content digunakan untuk mendefinisikan konten dari modal, ini bisa berisi banyak komponen HTML (div, paragraf, gambar, dan lainnya).
  • Class .modal-header digunakan untuk menentukan header dari modal. Dalam contoh diatas, di header terdapat button dengan atribut .data-dismiss="modal” yang digunakan untuk menutup modal jika diklik (akan muncul tanda close). Terdapat juga atribut close="close" digunakan untuk menentukan style dari tombol close. Nah juga ada class .modal-title yang digunakan untuk membuat judul dari modal (dengan style dari header yang memiliki tinggi baris yang proporsional)
  • Class .modal-body digunakan untuk mendefinisikan isi dari modal. Bisa berbentuk text, gambar, video, dan lainnya.
  • Class .modal-footer digunakan untuk membuat footer dari modal dengan ciri utama akan secara default rata kanan

Animasi

Untuk membuat animasi modal teman – teman dapat membuat sendiri dengan javascript, tetapi secara default terdapat class .fade yang digunakan untuk emmberi animasi “fade” atau muncul dan menghilang secara perlahan.

Contoh penggunaannya adalah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal dengan animasi fade</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Buka modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

Ukuran Modal

Modal bootstrap juga dapat diatur ukurannya yaitu dengan menambahkan class

  • .modal-sm untuk modal dengan ukuran yang kecil
  • .modal-lg untuk modal dengan ukuran yang beasr
  • .modal-xl untuk ukuran modal yang paling besar (hanya bisa berdampak jika layar laptop/hp teman cukup lebar, jika tidak cukup lebar maka ukuran nya akan sama dengan .modal-lg)

Tetapi secara default modal akan memiliki ukuran yang medium tanpa memasukkan class ukuran. contoh programnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Kecil</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Buka modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

<div class="container">
  <h2>Modal Besar</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
    Buka modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

<div class="container">
  <h2>Modal Extra Besar</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
    Buka modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal2">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
</body>
</html>

Modal posisi tengah

Untuk menengahkan modal secara horizontal dan vertikal teman – teman bisa menggunakan class .modal-dialog-centered.

contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Buka modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

Modal scroll

Jika didalam modal kita memiliki banyak konten maka secara otomatis scrollbar akan ditambahkan dalam halaman tersebut. Untuk dapat memahami nya dilahkan lihat pada contoh dibawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Scroll Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Buka modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h1 class="modal-title">Modal Heading</h1>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <p>Perpustakaan Aleksandria di Kota Aleksandria, Mesir merupakan salah satu perpustakaan terbesar dan terpenting pada zaman kuno. Perpustakaan ini merupakan bagian dari sebuah lembaga penelitian yang lebih besar, Mouseion, yang dipersembahkan untuk para Musai (sembilan dewi yang melambangkan seni). Gagasan mengenai sebuah perpustakaan untuk segala bidang di Aleksandria mungkin diusulkan oleh Demetrios dari Faleron (seorang negarawan asal Athena yang menjalani pengasingannya di Aleksandria) kepada Raja Ptolemaios I Soter pada zaman Helenistik.</p>
          <p>Rancangan untuk mendirikan perpustakaan ini mungkin sudah disusun pada masa raja tersebut, tetapi perpustakaan ini kemungkinan baru dibangun pada masa pemerintahan anaknya, yaitu Ptolemaios II Filadelfos. Berkat dukungan dari raja-raja Wangsa Ptolemaios, perpustakaan ini dengan segera memperoleh banyak sekali gulungan papirus. Tidak diketahui secara pasti berapa jumlah gulungan papirus yang disimpan di perpustakaan ini, tetapi perkiraannya berkisar antara 40.000 hingga 400.000 gulungan.</p>

          <p>Salah satu alasan Aleksandria dianggap sebagai pusat keilmuan dan pembelajaran adalah keberadaan perpustakaan ini. Banyak cendekiawan terkenal yang bekerja di perpustakaan ini pada abad ketiga dan kedua SM, seperti Zenodotos dari Efesos yang berupaya membakukan naskah puisi-puisi Homeros, Kalimakos yang menulis Pinakes (kadang dianggap sebagai katalog perpustakaan pertama di dunia), Apolonios dari Rodos yang menyusun puisi wiracarita Argonautika, Eratostenes dari Kirene yang menghitung keliling Bumi dengan keakuratan yang hanya meleset sedikit, Aristofanes dari Bizantion yang menciptakan sistem diakritik Yunani dan adalah orang pertama yang membagi naskah-naskah puisi menjadi baris-baris, serta Aristarkos dari Samotrakia yang membuat naskah definitif puisi-puisi Homeros dan menulis ulasan-ulasan panjang untuk puisi-puisi tersebut</p>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

ada kalanya kita hanya ingin yang dapat di scroll ketika konten dalam modal bootstrap banyak adalah modal nya saja, tanpa halaman dibelakangnya ikut. Untuk mewujudkan hal ini kita dapat menggunakan class .modal-dialog-scrollable

contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Scroll Example</h2>
  <p>Use the .modal-dialog-scrollable class to enable scrolling inside the modal.</p>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h1 class="modal-title">Modal Heading</h1>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <h3>Text bisa di scrol</h3>
          <p>Perpustakaan Aleksandria di Kota Aleksandria, Mesir merupakan salah satu perpustakaan terbesar dan terpenting pada zaman kuno. Perpustakaan ini merupakan bagian dari sebuah lembaga penelitian yang lebih besar, Mouseion, yang dipersembahkan untuk para Musai (sembilan dewi yang melambangkan seni). Gagasan mengenai sebuah perpustakaan untuk segala bidang di Aleksandria mungkin diusulkan oleh Demetrios dari Faleron (seorang negarawan asal Athena yang menjalani pengasingannya di Aleksandria) kepada Raja Ptolemaios I Soter pada zaman Helenistik.</p>
          <p>Rancangan untuk mendirikan perpustakaan ini mungkin sudah disusun pada masa raja tersebut, tetapi perpustakaan ini kemungkinan baru dibangun pada masa pemerintahan anaknya, yaitu Ptolemaios II Filadelfos. Berkat dukungan dari raja-raja Wangsa Ptolemaios, perpustakaan ini dengan segera memperoleh banyak sekali gulungan papirus. Tidak diketahui secara pasti berapa jumlah gulungan papirus yang disimpan di perpustakaan ini, tetapi perkiraannya berkisar antara 40.000 hingga 400.000 gulungan.</p>

          <p>Salah satu alasan Aleksandria dianggap sebagai pusat keilmuan dan pembelajaran adalah keberadaan perpustakaan ini. Banyak cendekiawan terkenal yang bekerja di perpustakaan ini pada abad ketiga dan kedua SM, seperti Zenodotos dari Efesos yang berupaya membakukan naskah puisi-puisi Homeros, Kalimakos yang menulis Pinakes (kadang dianggap sebagai katalog perpustakaan pertama di dunia), Apolonios dari Rodos yang menyusun puisi wiracarita Argonautika, Eratostenes dari Kirene yang menghitung keliling Bumi dengan keakuratan yang hanya meleset sedikit, Aristofanes dari Bizantion yang menciptakan sistem diakritik Yunani dan adalah orang pertama yang membagi naskah-naskah puisi menjadi baris-baris, serta Aristarkos dari Samotrakia yang membuat naskah definitif puisi-puisi Homeros dan menulis ulasan-ulasan panjang untuk puisi-puisi tersebut</p>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

Sekian penjelasan mengenai dasar dari modal bootstrap, teman teman bisa mengembangkan sendiri sesuai kebutuhan dari website teman – teman. Terima kasih


YogaBayu

Seorang yang menyukai dunia elektronika dan website.

Share
Tags: modal bootstrap bigmodal bootstrap centermodal bootstrap sizemodal bootstrap template

    Related Post