Hari ini saya akan membahas tentang bagaimana cara membuat modal dengan kombinasi script bootstrap dan jquery.
Berikut adalah langkah - langkahnya :
hasilnya :
Jika salah satu foto diklik akan muncul seperti dibawah ini :
Sekian postingan saya kali ini, semoga bermanfaat bagi siapapun yang membaca.
referensi : W3schools
Berikut adalah langkah - langkahnya :
- Buka text editor lalu ketikkan script dibawah ini. (text editor bisa memakai apa saja sesuai keinginan anda notepad,notepad++,sublime,bluefish,dll)
<!DOCTYPE html>
<html>
<head>
<title>SMP N 1 Bangun asri</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<center>
<center>
<!--copyright putut|wulan|febri|daesmon-->
<font face="Times New Romans" size="5">SMP NEGERI 1 BANGUN ASRI</br><!--copyright putut|wulan|febri|daesmon-->
Jl.Serayu Raya no.7 Mejayan<br><!--copyright putut|wulan|febri|daesmon-->
Kab. Madiun, Telp. (0351)-388-490<!--copyright putut|wulan|febri|daesmon-->
Kode Pos 63153, Jawa Timur<br></center><!--copyright putut|wulan|febri|daesmon--></font>
<nav><!--copyright putut|wulan|febri|daesmon-->
<!--copyright putut|wulan|febri|daesmon-->
<ul><!--copyright putut|wulan|febri|daesmon-->
<a href="home.php">Home|</a><!--copyright putut|wulan|febri|daesmon-->
<a href="profil.php">Profil|</a><!--copyright putut|wulan|febri|daesmon-->
<a href="pengajar.php">Pengajar|</a><!--copyright putut|wulan|febri|daesmon-->
<a href="kegiatan.php">Kegiatan|</a><!--copyright putut|wulan|febri|daesmon-->
<a href="daftar.php">Daftar|</a><!--copyright putut|wulan|febri|daesmon-->
<a href="siswa.php">Siswa Baru</a><!--copyright putut|wulan|febri|daesmon-->
</ul><!--copyright putut|wulan|febri|daesmon-->
</nav><!--copyright putut|wulan|febri|daesmon-->
<center>
<h2 style="text-align:center">Foto - Foto Kegiatan SMPN 1 Bangun Asri</h2>
<p>SMP N 1 Bangun Asri memiliki banyak kegiatan yang bermanfaat bagi siswa untuk menumbuhkan rasa sosial, nasionalisme dan kekelurgaan antar siswa satu dengan yang lainnya. Berikut adalah Kegiatan yang ada di SMPN 1 Bangun Asri.</p>
<div class="responsive">
<div class="img">
<img src="images/kegiatan-bakti-sosial-bekasi-indonesia+1152_13021454151-tpfil02aw-3868.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="desc">Bakti sosial.<br><!--copyright putut|wulan|febri|daesmon-->
Bakti sosial adalah kegiatan rutin yang diadakan oleh SMPN 1 Bangun Asri. acara ini dilaksanakan untuk menumbuhkan rasa sosial bagi para siswa dan membudayakan tolong menolong. Kegiatan ini dilaksanakan dengan mengumpulkan beras dan mie instan dari siswa yang jumlahnya tidak ditentukan atau seiklasnya kemudian disalurkan kepada masyarakat yang kurang mampu untuk kegiatan ini para guru dibantu oleh staf osis sekolah.</p>
</div>
</div>
</div>
<div class="responsive">
<div class="img">
<img src="images/11156330_921340484564250_8500174313262043705_n.jpg" alt="Forest" width="300" height="200">
<div class="desc">Kerja bakti.<br>
Setiap hari jum'at seluruh siswa dan warga sekolah bekerja sama untuk membersihkan seluruh sekolah. kegiatan ini dilaksanakan guna menumbuhkan rasa cinta alam dan cinta kebersihan agar tidak banyak penyakit yang berbahaya.<!--copyright putut|wulan|febri|daesmon-->
</div>
</div>
</div>
<div class="responsive">
<div class="img">
<img src="images/236689.jpg" alt="Northern Lights" width="300" height="200">
<div class="desc">Maulid Nabi.
Kegiatan Maulid nabi selalu dilaksanakan agar para siswa lebih dekat dengan tuhan dan membentengi siswa agar terhidar dari perbuatan tercela<br><!--copyright putut|wulan|febri|daesmon-->
</div>
</div>
</div>
<div class="responsive">
<div class="img">
<img src="images/555fe2c90423bdd1168b4569.jpeg" alt="Mountains" width="300" height="200">
<div class="desc">Upacara.
upacara dilaksanakan secara rutin setiap hari senin dan dilaksanakan pada hari - hari tertentu, seperti hari pahlawan, hari kartini, hari sumpah pemuda, hari guru dan sebagainya. upacara dilaksanakan untuk menumbuhkan rasa nasionalisme di diri siswa <br><!--copyright putut|wulan|febri|daesmon-->
</div>
</div>
</div>
<div class="responsive">
<div class="img">
<img src="images/dsci0499.jpg" alt="Mountains" width="300" height="200">
<div class="desc">Pramuka.
Kepramukaan adalah program pemerintah yang sedang dijalankan disekolah - sekolah untuk membentuk karakter generasi bangsa yang unggul, disiplin, dan bertanggung jawab<br><!--copyright putut|wulan|febri|daesmon-->
</div>
</div>
</div>
<div class="responsive">
<div class="img">
<img src="images/Kegiatan-Pelantikan-PMR.jpg" alt="Mountains" width="300" height="200">
<div class="desc">PMR.
PMR mengajarkan anak - anak tentang penting kesehatan dan anak - anak dibimbing untuk dapat menjadi relawan medis saat terdapat bencana alam maupun kecelakaan.
pada sat disekolah siswa bertugas sebagai petugas kesehatan saat upacara maupun kegiatan yang lainnya.<br>
<!--copyright putut|wulan|febri|daesmon-->
<!--copyright putut|wulan|febri|daesmon-->
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// Get all images and insert the clicked image inside the modal
// Get the content of the image description and insert it inside the modal image caption
var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
images[i].onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.nextElementSibling.innerHTML;
}
}
</script>
</body>
</html>
hasilnya :
referensi : W3schools
lain kali kasih live demo nya ya kakak :v
BalasHapus