kode bootstrap

Cara menggunakan auto popup modal bootstrap

Dengan Bootstrap keperluan membuat sebuah kotak dialog atau modal dapat dilakukan dengan mudah, fleksibel dan modern.

Berikut contoh dan tutorial yang bisa digunakan dalam pembuatan sebuah kotak dialog/modal.

Cara Membuat Modal Bootstrap

Untuk membuat modal dengan bootstrap silahkan pelajari contoh modal berikut :

Contoh :



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

Hasil :




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

Uji coba

Ukuran Modal

Secara default Bootstrap Modal memiliki nilai ukuran medium, tapi untuk keperluan lainnya bootstrap sudah menyediakan nama class untuk mengatur ukuran dari Modal tersebut.

Nama class yang bisa digunakan untuk mengatur modal adalah .modal-lg [ukuran besar] dan




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

0 [ukuran kecil], dan dituliskan setelah class dasar




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

Contoh Large Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

Hasil :




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal Large



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup
      
    
  





Klik Tombol diatas. Silahkan rubah Lebar area Preview untuk melihat
Tampilan responsive modal

Uji coba

Contoh Small Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

Hasil :




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal Large



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup
      
    
  





Klik Tombol diatas. Silahkan rubah Lebar area Preview untuk melihat
Tampilan responsive modal

Uji coba

Efek Animasi Memudar dan Menghapusnya

Maksud dari animasi memudar adalah modal akan tampil dan hilang secara perlahan atau adanya jeda waktu

Efek animasi memudar ditentukan oleh nama class




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

2 pada class dasar




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

3, contoh modal efek fade/memudar dapat dilihat pada contoh contoh sebelumnya

Jika tidak menginginkan efek fade pada modal cukup menghapus nama class




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

2 pada class dasar




  Triksonic Demo Bootstrap 3
  
  
  



Bootstrap 3 Modal



  Buka Modal




  
    
    
      
        ×
        Judul Modal
      
      
      
        Konten yang ingin ditampilkan disini
      
      
      
        Tutup

Apa itu bootstrap modal?

Membuat Modal dengan Bootstrap – Modal atau yang biasa di sebut pop up pada bootstrap adalah sebuah kotak dialog yang biasanya di gunakan untuk melakukan konfirmasi atas suatu aksi. Misal, ketika anda ingin menghapus suatu data, anda bisa menggunakan modal ini sebagai pesan konfirmasi atas aksi apa yang anda lakukan.

Apa itu modal web?

Modal adalah kotak dialog yang muncul pada halaman web. Cara kerja modal adalah ketika modal dalam kondisi aktif maka dialog box akan tampil dan halaman utamanya menjadi tidak aktif, namun halaman utama tetap dapat terlihat pada jendela browser.

Cara Membuat Modal Bootstrap

Contoh :

Hasil :

Bootstrap 3 Modal

Judul Modal

Ukuran Modal

Bootstrap 3 Modal

Judul Modal

Bootstrap 3 Modal

Judul Modal

Contoh Large Modal

Hasil :

Bootstrap 3 Modal Large

Judul Modal

Contoh Small Modal

Hasil :

Bootstrap 3 Modal Large

Judul Modal

Efek Animasi Memudar dan Menghapusnya

Bootstrap 3 Modal

Judul Modal

Bootstrap 3 Modal

Judul Modal

Bootstrap 3 Modal

Judul Modal

Bootstrap 3 Modal

Judul Modal

Apa itu bootstrap modal?

Apa itu modal web?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề