Bootstrap

Bootstrap Part 15 : Membuat Modal Dengan Bootstrap

Bootstrap Part 15 : Membuat Modal Dengan Bootstrap

Membuat Modal Dengan Bootstrap

Modal adalah sebuah kotak dialog atau sering di sebut dengann popup yang menampilkan pesan atau konfirmasi untuk suatu aksi, anda bisa membuat promosi dengan modal, membuat persetujuan untuk suatu aksi, misalnya anda membuat aksi untuk menghapus suatu data maka anda bisa menggunakan modal untuk membuat pertanyaan konfirmasi seperti misalnya “apakah anda yakin ingin menghapus data ini ?”. banyak lagi kegunaan dari modal karena anda juga bisa menampilkan data dalam bentuk modal.

Bootstrap menyediakan sebuah plugin modal yang bisa di gunakan dengan sangat mudah. membuat modal dengan bootstrap caranya sangat mudah. perhatikan penjelasan modal bootstrap berikut ini.

Cara membuat modal dengan bootstrap

Dan hasilnya saat tombol di klik

membuat modal dengan bootstrap

membuat modal dengan bootstrap

penjelasan contoh membuat modal di atas, perhatikan pada atribut

pada tombol, isi dari atribut tersebut menentukan id modal yang akan di munculkan jika tombol tersebut di klik. perhatikan pada contoh modal di atas

class “fade” di atas berfungsi untuk memberi efek fade atau memudar pada saar pemunculan dan penutupan modal.

atribut data-dismiss seperti di atas berfungsi untuk menutup modal. kemudian lagi modal memiliki bagian kepala atau heading, body dan footer.

Untuk mengatur ukuran modal yang ingin di tampilkan anda bisa menambahkan class “modal-sm” untuk menampilkan modal dengan ukuran kecil pada element modal-dialog. dan tambahkan class “modal-lg” untuk menampilkan modal dengan ukuran besar

See the Pen BjRWxa by Malas Ngoding (@malasngoding) on CodePen.0

Sekian lah tutorial bootstrap part 15 : Membuat modal dengan bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Incoming search terms:

  • membuat modal bootstrap
  • cara membuat modal bootstrap
  • membuat popup dengan bootstrap
  • membuat modal dengan bootstrap
  • cara membuat modal dengan bootstrap
  • membuat modal
  • cara membuat modal
  • membuat crud dengan modal bootstrap
  • membuat modal bootstrap codeigniter
  • membuat modal pop up




Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
5 Comments
  • Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap – Malas Ngoding 2 years ago

    […] Part 13 : Membuat Form dengan Bootstrap Bootstrap Part 14 : Membuat Carousel dengan Bootstrap Bootstrap Part 15 : Membuat Modal dengan Bootstrap Bootstrap Part 16 : Mengenal System Grid […]


  • manul 2 years ago

    izin belajar gan


  • okta zohiri fahda 2 years ago

    Ijin sedot ya kang….trimakasih banyak


  • Membuat Template Blog Sederhana Dengan Bootstrap – Malas Ngoding 2 years ago

    […] Membuat modal dialog dengan bootstrap […]


  • petarung 2 years ago

    gan gimana caranya klo membuat modal di dalam modal? namun dengan background yg berubah menjadi fade pada modal yang pertama? makasih gan.



Write a Comment

Your email address will not be published. Required fields are marked *