Cara Membuat Pop Up Gambar dengan Bootstrap

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Pop Up Gambar dengan Bootstrap. Sebelum kita mulai saya ingin menjelaskan bahwa bootstrap merupakan sebuah framework css dan sebelum teman-teman belajar bootstrap teman-teman harus mengenal lebih dalam tentang css terlebih dahulu. jadi di bootstrap ini kita hanya perlu mempelajari library-library atau class class yang ada didalamnya saja. Cukup mudah pastinya dengan hadirnya bootstrap ini teman-teman. Dan pada kali ini kita akan belajar tentang Cara Membuat Pop Up Gambar dengan Bootstrap Oke langsung saja kita mulai ya teman-teman.

Pertama-tama teman-teman buat folder terlebih dahulu dan siapkan sebuah gambar bebas terserah teman-teman. Jika sudah silahkan teman-teman ketik/copy script dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>Pop Up Gambar Bootstrap</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style>
		img{width: 200px; height:200px;}
	</style>
</head>
<body>
<center>
	<h1>Cara Membuat Pop Up Gambar dengan Bootstrap</h1>
	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	 <img src="gambar.jpg" alt="" class="img-responsive">
	</button>
 
	<!-- Modal -->
	<div class="modal fade" id="myModal" 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">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">Cara Membuat Pop UP Gambar dengan Bootstrap</h4>
	      </div>
	      <div class="modal-body">
	      	<center>	
	        	<img src="gambar.jpg" alt="" class="img-responsive">
	        </center>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>	
	      </div>
	    </div>
	  </div>
	</div>
</center>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Script diatas saya menggunakan CDN ya teman-teman jadi harus ada koneksi internet jika ingin script diatas berjalan dengan baik dibrowser. Kalau teman-teman tidak ingin atau tidak ada internet, teman-teman dapat mendownload library bootstrapnya di Getbootstrap.com.

Cara Membuat Pop Up Gambar dengan Bootstrap

Oke lanjut, hasil dari script diatas jika dijalankan dibrowser maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Sebelum diklik

Sesudah diklik

Oke teman-teman hasil jadinya seperti pada gambar diatas, dan itu merupakan contoh sederhananya tentang Cara Membuat Pop Up Gambar dengan Bootstrap Cukup mudah kan teman-teman ?, dan untuk pengembangannya silahkan teman-teman modifikasi sesuai selera dan keinginan teman-teman.

Cukup sekian pembahasan kali ini tentang Cara Membuat Pop Up Gambar dengan Bootstrap semoga dapat bermanfaat buat teman-teman yang masih pemula dalam bootstrap ini dan sampai bertemu dipembahasan selanjutnya ya.

Terimakasih

Cara Membuat Pop Up Gambar dengan Bootstrap

Kategori