Pada kesempatan kali ini saya akan melanjutkan penjelasan cara membuat modal gambar responsive dengan CSS dan JavaScript Part2. Jika sebelumnya teman-teman sudah membuat element modal html beserta dengan kode JavaScript, pada penjelasan ini teman-teman akan membuat style css untuk responsive gambar beserta dengan element modal gambar tersebut. Dan untuk membuat responsive suatu element di css, teman-teman bisa menggunakan css @media rule. Dimana fungsi css @media rule tersebut adalah untuk menentukan resolusi layar pengguna seperti desktop, tab dan phone. Dan untuk lanjutan tahapan dari penjelasan sebelumnya kalian bisa ikuti tahapan dibawah ini.
Berikut Tahapannya :
- Buka file index.html yang sebelumnya sudah dibuat
- Tambahkan kode css berikut, tepat didalam kode sebelum penutup </head> html. Berikut kodenya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<style> body {font-family: Arial, Helvetica, sans-serif;} #elementImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #elementImg:hover {opacity: 0.7;} .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } .keluar { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .keluar:hover, .keluar:focus { color: #bbb; text-decoration: none; cursor: pointer; } @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } </style> |
- Jika sudah save terlebih dahulu file index.html tersebut
- Dan lihat hasilnya di browser teman-teman.
Sampai disini penjelasan saya mengenai cara membuat modal gambar responsive dengan CSS dan JavaScript Part2, semoga bermanfaat.