lebakcyber. net – Menghasilkan Modal menggunakan Bootstrap. Pada kesempatan kali ini kita akan mencoba membuat modal dengan memanfaatkan class yang disediakan oleh bootstrap Modal sendiri merupakan kotak dialog atau sering disebut popup yang berisi konfirmasi atau pesan atas suatu tindakan. Dalam modal kita bisa membuat kesepakatan atas suatu tindakan, melakukan promosi atau misalnya sebagai konfirmasi ketika kita ingin menghapus suatu data maka kita bisa menggunakan modal sebagai bentuk konfirmasi Bootstrap telah menyediakan plugin modal yang bisa kita gunakan dengan mudah. Untuk lebih jelasnya, sebaiknya kita langsung saja mempraktekkan cara membuat modal dengan memanfaatkan class-class yang sudah disediakan oleh bootstrap Iklan Sekarang kita akan coba praktekkan cara membuat modal dengan menggunakan class yang disediakan oleh bootstrap jadi silahkan buat file baru dengan nama index. html dan masukkan perintah seperti di bawah ini <!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Modal di Bootstrap - lebakcyber.net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h1>Membuat Modal dengan Bootstrap</h1></center>
<br/>
<!-- Button yang digunakan untuk menampilkan modal-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Sebuah Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Ini adalah heading dari Modal</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>Ini bagian body dari modal</p>
<p><b>lebakcyber.net</b></p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Button Untuk Menutup Modal</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Nanti hasilnya akan seperti pada gambar di bawah ini  Oke, itulah cara membuat modal di bootstrap dengan memanfaatkan fitur-fitur yang disediakan oleh bootstrap agar kita bisa dengan mudah membuat modal di halaman web yang sedang kita buat. Semoga tutorial Modal di bootstrap ini dapat bermanfaat bagi anda yang sedang belajar bootstrap dan sampai jumpa di tutorial belajar bootstrap lainnya Selamat datang kembali di lapak belajar, masih dalam rangkaian tutorial tentang bootstrap 4, pada tutorial kali ini kita akan membahas cara membuat modal dengan bootstrap Modal atau biasa dikenal dengan popup, modal digunakan untuk menampilkan pesan atau konfirmasi dari suatu tindakan, modal ini bisa anda gunakan sebagai tempat untuk menampilkan informasi seperti promosi dll. Modal juga bisa digunakan untuk melakukan konfirmasi persetujuan misalnya seperti persetujuan menghapus data, maka biasanya jika kita ingin menghapus data maka muncul pertanyaan konfirmasi “Apakah anda yakin ingin menghapus data ini?” Bootstrap memiliki class yang bisa anda gunakan untuk membuat modal dengan mudah, baiklah langsung saja kita akan membahas tentang membuat modal dengan Bootstrap
Cara Membuat Modal dengan Bootstrapuntuk contoh pembuatan modal silahkan perhatikan script dibawah ini 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <. DOCTYPE html> <html lang="en"> <kepala> <judul>Modal dengan Bootstrap</judul> <meta set karakter="utf-8"> <meta nama="viewport" konten="width=device-width, initial-scale=1"< /a>> <tautan rel="stylesheet" href="https. //maxcdn. bootstrapcdn. com/bootstrap/4. 0. 0/css/bootstrap. min. css">
</kepala> <tubuh>
<div kelas="wadah"> <h2>Contoh Modal</h2> <. -- Tombol untuk Buka Modal --> <tombol ketik="button" kelas="btn btn-primary" data-beralih="modal" data-target="#modalku"> Tampilkan Modal </tombol>
<. -- Ibukota -->> <div kelas="modal fade" id="modalku"> <div kelas="modal-dialog"> <div kelas="modal-content">
<. -- Ini adalah Bagian Tajuk Modal --> <div kelas="modal-header"> <h4 kelas="modal-title">Header Modal<< /a>/h4> <tombol ketik="button" kelas="tutup" data< /a>-berhentikan="modal" >&kali;< /tombol> </div>
<. -- Ini adalah Bagian Tubuh Modal --> <div kelas="modal-body"> Badan Modal </div>
<. -- Ini adalah Bagian Footer Modal --> <div kelas="modal-footer"> <tombol ketik="button" kelas="btn btn-bahaya" data-keluarkan="modal">Tutup</tombol> </div>
</div> </div> </div>
</div>
</tubuh> </html> Misal kita simpan dengan nama modal_bootstrap, lalu kita buka di browser lalu hasilnya Keterangan
|
Apa modal dalam html?
Pos Terkait
Copyright © 2024 apacode Inc.
