Widodo

Membuat Modal Dengan Bootsrap

Assalamualaikum Wr Wb.

Apa Kabarnya Teman2 Semoga kabar kalian baik semua oke untuk di kesempatan hari ini s-widodo.com akan memberi tutorial lagi yaitu membuat modal menggunakan bootstap modal adalah pop up yang muncul untuk melakukan aksi, memberi peringatan kepada pengunjung sebagai form contact, login, sigup dan banyak lagi fungsinya tergantung kebutuhan kita untuk membuat modal tersebut untuk di gunakan sebagai apa, untuk itu apa saja yang dibutuhkan untuk membuat sebuah modaal dengan bootstrap adapun cara-caranya.

1. Silahkan sediakan file css bootstrap, Jquery Bootstrap, Jquery.js

<link rel="stylesheet" href="css/bootstrap.css" media="screen" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>

Untuk Menampilkan icon silahkan gunakan font awesome

2. Sekarang New Document dan panggil semua file yang ada di nomer 1

3. Sekarang kita buat Htmlnya seperti dibawah ini dimulai dengan membuat buttonya

<button type="button" data-toggle="modal" data-backdrop="static" href="#myModal1" class="btn btn-primary"><i class="icon-desktop"></i> Modal</button>

4. Setelah itu kita tinggal buat modalnya seperti dibwah ini

<!-- Modal dialog -->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Judul Modal</h4>
</div>
<div class="modal-body">
Content Modal Ada disini
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

5. Keseluruhanya akan seperti ini

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Membuat Modal Dengan Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/bootstrap.css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.css" media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<style>
body {background:#0099FF;}
</style>

</head>
<body>
<div style="margin:auto; width:100px; margin-top:20%">
<button type="button" data-toggle="modal" data-backdrop="static" href="#myModal1" class="btn btn-primary">
<i class="icon-desktop"></i> Modal</button>
</div>

<!-- Modal dialog -->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Judul Modal</h4>
</div>
<div class="modal-body">
Content Modal Ada disini
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body></html>

6. Jangan Lupa simpan dan selesai...

Untuk demo atau yang masih bingung penerapanya silahkan download dibawah ini

Download



0 Komentar