<html>
<head>
<title>Latihan Modal | Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"></head>
<body>
<div class="container">
<center><h1>Membuat Modal dengan Bootstrap</h1>
<!-- Tombol untuk menampilkan modal-->
<button type="button" class="btn btn-info btn-lg"
data-toggle="modal" data-target="#myModal">Buka Modal</button>
<h1>TutorialPedia.NET</h1>
</center>
<!-- 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">Bagian heading modal</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>bagian body modal.</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>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
// angka 500 dibawah ini artinya pesan akan muncul dalam 0,5 detik setelah document ready
$(document).ready(function(){
setTimeout(function(){
$('#myModal').modal('show');
}, 500);
});
// angka 3000 dibawah ini artinya pesan akan hilang dalam 3 detik setelah muncul
setTimeout(function(){
$('#myModal').modal('hide');
}, 3000);
</script>
</body>
</html>
Bisa anda perhatikan script dibawah ini , koding inilah nantinya yang akan menampilakan popup berdasarkan time sesuai dengan waktu yang ditentukan oleh agan sendiri mau berapa lama waktu munculnya.
<script>
// angka 500 dibawah ini artinya pesan akan muncul dalam 0,5 detik setelah document ready
$(document).ready(function(){
setTimeout(function(){
$('#myModal').modal('show');
}, 500);
});
// angka 3000 dibawah ini artinya pesan akan hilang dalam 3 detik setelah muncul
setTimeout(function(){
$('#myModal').modal('hide');
}, 3000);
</script>
Sekian tutorial singakat writecode cara Membuat popup dengan time javascript bootstrap semoga bermanfaat.
Posting Komentar
Posting Komentar