--> Skip to main content
Home Bootstrap Pemrograman Web Membuat Modal Bootstrap Pada Navigation Bar

Membuat Modal Bootstrap Pada Navigation Bar

Tutorial pemrograman kita kali ini akan membahas tentang cara membuat modal pada Bootstrap.

Mungkin sebagian dari kita masih ada yang bingung dengan istilah modal, namanya mirip seperti orang mau inventasi aja.

Ada satu penjelasan yang mudah dipahamai dari website dunia informatika tentang apa itu modal pada bootstrap ?. Jadi bisa kita artikan modal itu jendela yang muncul dan berada di tengah-tengah serta menutupi halaman yang memanggilnya. Ada yang mengatakan modal ini mirip dengan popup.

Dalam percobaan ini, kita akan mengimplementasikan modal pada navigation bar (navbar). Untuk memami navbar lebih lanjut, silahkan pelajari pada tutorial berikut:


Output modal bootstrap yang akan ditunjukkan oleh Gambar.1 dibawah ini :

(Gambar.1 )

Langkah-langkah Membuat Modal Bootstrap 

1. Pertama kali anda buat navigation bar seperti kode program dibawah ini : 
<div class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Pusat Ilmu Secara Detil</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="#signin" data-toggle="modal" data-target="#theModal">Modal</a></li>  
    
    <li class="clr3"><a href="">PHP</a></li>
   </ul>
  </div>
 </div>
</div>

Langkah pertama tersebut untuk menghasil ouput navigation bar seperti Gambar.2 dibawah ini :

(Gambar.2 )

Coba anda perhatikan potongan kode diatas :
<li class="clr2"><a href="#signin" data-toggle="modal" data-target="#theModal">Modal</a></li>

Attribut data-toggle="modal" memicu modal ketika diklik pada menu yang terdapat di navbar.  Sedangkan data-target="#theModal" merupakan interface modal yang akan ditampilkan. Bagian #theModal adalah nama id modal yang dipanggil.


2 .Langkah kedua adalah mendesain interface modal yang nantinya akan ditampilkan ketika diklik menu pada navbar.
<!-- Bagian modal -->
<div class="container">
  <div class="modal" id="theModal" role="dialog">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      <h4 class="modal-title">Judul Modal</h4>
     </div>
     <div class="modal-body">
      Informasi dari modal body
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
     </div>
    </div>
   </div>
  </div>
</div>

Coba perrhatikan source code diatas, secara garis besar modal itu terdiri dari 3 bagian:
  • modal-header
  • modal-body
  • modal-footer

Dari kode diatas, ada hal-hal penting yang perlu kita ketahui. Potongan kode dibawah ini untuk menciptakan sebuah tanda "x" pada sudut atas. Jadi tanda tersebut berfungsi untuk menutup (close) modal.
<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>

Yang membuat tanda "x" tersebut adalah :&times dimana kode tersebut sebenarnya sering digunakan dalam operator matematika dengan html. Jadi anda dapat menggunakan tanda-tanda lain. Silahkan baca tutorial tentang simbol-simbol matematika html untuk menggantikan tanda "x" tersebut.

Atribut data-dismiss="modal" yang diterapkan pada elemen button akan menghasilkan sebuah event close ketika button tersebut diklik.

Source Code Lengkapnya

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Tutorial Modal Pada Navigasi</title>
 <!-- Bagian css -->
 <link rel="stylesheet" href="assets/css/bootstrap.css">
 <link rel="stylesheet" href="assets/css/ilmudetil.css">
 <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Pusat Ilmu Secara Detil</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="#signin" data-toggle="modal" data-target="#theModal">Modal</a></li>  
    
    <li class="clr3"><a href="">PHP</a></li>
   </ul>
  </div>
 </div>
</div>
</br></br></br></br>
</div>

<!-- Bagian modal -->
<div class="container">
  <div class="modal" id="theModal" role="dialog">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      <h4 class="modal-title">Judul Modal</h4>
     </div>
     <div class="modal-body">
      Informasi dari modal body
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
     </div>
    </div>
   </div>
  </div>
</div>
<!-- Akhir dari modal -->
</body>
</html>


Live Preview Download

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar