Membuat Modal Pada Bootstrap
Modal adalah sebuah Kotak Dialog untuk menampilkan pesan atau konfirmasi untuk suatu aksi. Kita bisa membuat promosi dengan Modal untuk membuat pernyataan suatu data maka kita bisa menggunakan Modal untuk membuat pernyataan konfirmasi seperti "Apakah Anda yakin ingin mengabus data ini ?" dan masih banyak lagi kegunaan dari Modal karena kita juga bisa menampilkan data dalam bentuk Modal.
Bootstrap menyediakan sebuah Plugin Modal yang bisa kita gunakan dengan sangat mudah sekali.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h1>Membuat Modal dengan Bootstrap</h1></center>
<br/>
<!-- Tombol untuk menampilkan modal-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka 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">Selamat Anda Beruntung</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>Selamat Anda Telah Mendapatkan hadiah mobil. Dan bisa langsung di ambil di dealer terdekat, dengan syarat membayarnya dengan lunas </p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Di Bawah ini adalh hasil dari script di atas
Dan ini ketika modal di tekan
Referensi : malasngoding.com
Tidak ada komentar :
Posting Komentar