Cara Membuat Modal Pada Bootstrap
Assalamu'alaikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Pada kali ini saya akan membagikan sedikit tutorial yaitu bagaimana sih cara membuat modal pada Framework Bootstrap, Nah langsung saja dibaca dan dipahami, serta dipraktikkan ya
Latar Belakang
Minimnya Teman-teman belum mengetahui tentang bagaimana cara membuat Modal Dialog pada framework Bootstrap
Maksud Dan Tujuan
Agar mengerti dan paham tentang bagaimana cara membuat Modal dialog pada Framework, bootstrap, dan juga memahami class-class yang ada pada Bootstrap
Alat dan bahan
laptop
Browser
Teks Editor
Jangka Waktu yang dibutuhkan
2 jam untuk memahami dan mempraktikkannya
pembahasan atau langkah kerja
Modal adalah sebuah kotak dialog atau sering disebut dengan popup yang menampilkan pesana konfirmasi untuk suatu aksi, contohnya sobat ingin mebuat aksi menghapus data maka akan muncul kotak dialog yang kurang lebihnya bertuliskan seperti ini " Apakah anda ingin menghapus data ini ? " Banyak lagi yang dapat dilakukan oleh modal karna modal juga dapat menampilkan data dalam bentuk modal
Untuk membuat modal hanya mengunakan tag <div> setelah itu div tersebut diberikan nama dengan "myModal" nah setelah itu tinggal menambahkan class "modal"
Nah Untuk Lebih Jelasnya seperti berikut :
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> | |
| <title>Bootstrap : zaenferdiansyah</title> | |
| <style> | |
| .size { | |
| width: 600px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <center><h1>Membuat Corousel pada Bootstrap : ZaenFerdiansyah</h1></center> | |
| <div class="container"> | |
| <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> | |
| Launch demo modal | |
| </button> | |
| <!-- Modal --> | |
| <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| Hello, ZaenFerdiansyah | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
Nah Gimana Cara Kerja tersebut?
Kenapa Ketika Diklik Dia Bisa Muncul kotak Dialog?
Berikut Penjelasannya :
Diatas Sudah Terlihat bahwa pada button memiliki data target yang bernama "examplemodal", nah Sedangkanh pada kotak dialog, dia menggunakan nama Id yang sama seperti pada data-target
Bootstrap banyak menyediakan fasilitas modal yang responsive dan mudah untuk digunakan.
Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa, sekian dan terima kasih.
Wassalamu'alaikum Wr.Wb.
