Pada artikel sebelumnya di http://www.proweb.co.id/articles/web_application/modal_bootstrap.html kita telah membuat dialog Bootstrap atau modal dengan menggunakan html saja. Pada artikel sebelumnya di http://www.proweb.co.id/articles/web_application/dialog_bootstrap.html kita juga telah membahas mengenai memahami dialog Bootstrap.
Pada saat kita membuat aplikasi ada kemungkinan kita mengubah tampilan dialog sebelum ditampilkan kepada pengguna aplikasi kita, dengan kata lain kita ingin menjalankan suatu script tertentu sebelum dialog Bootstrap ditampilkan. Dengan demikian maka kita perlu membuka dialog Bootstrap dengan Javascript.
Untuk memanggil dialog bootstrap dengan javascript kita dapat membuat program seperti contoh berikut ini:
<script>
function bukaInfo()
{
$(‘#infoku’).modal(‘show’);
}
</script
Dan cara memanggilnya seperti berikut ini:
Membuat dialog itu mudah, <a href=”javascript:bukaInfo()”>info lanjut</a>
Demonya dapat dilihat di http://aris.proweb.asia/dist/coba31.html dengan tampilan seperti berikut ini:
Kemudian source code lengkapnya seperti berikut ini:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Memanggil Dialog Dengan Javascript</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</head>
<body>
<script>
function bukaInfo()
{
$(‘#infoku’).modal(‘show’);
}
</script>
<div class=”container”>
Membuat dialog itu mudah, <a href=”javascript:bukaInfo()”>info lanjut</a>
<!– Modal –>
<div class=”modal fade” id=”infoku” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>×</span></button>
<h4 class=”modal-title” id=”myModalLabel”>Kemudahan Tampilan Dialog</h4>
</div>
<div class=”modal-body”>
<p>Beberapa hal yang kita pelajari dari tampilan utama dialog pada Bootstrap adalah</p>
<ol>
<li>Container menggunakan class ‘<strong>modal</strong>’ , diikuti ‘<strong>modal-dialog</strong>’ , dan ‘<strong>modal-content</strong>'</li>
<li>Untuk header menggunakan class ‘<strong>modal-header</strong></li>
<li>Untuk body menggunakan class ‘<strong>modal-body</strong>'</li>
<li>Footer menggunakan class ‘<strong>modal-footer</strong>'</li>
</li>
<li>Bagian akhir<br /> </div><!– /.modal-content –><br /> </div><!– /.modal-dialog –><br /></div><!– /.modal –><br /><!– Modal –></li>
</ol> </div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Tutup</button>
<button type=”button” class=”btn btn-primary”>Simpan</button>
</div>
</div><!–modal-content–>
</div><!–modal-dialog–>
</div><!–modal–>
</div><!–container–>
</body>
</html>
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/javascript/#modals .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
