.png)
.png "Cara Membuat Popup Responsif dengan CSS")
Kamu pasti sering lihat tuh popup yang muncul di situs web, kan? Nah, popup itu biasanya digunakan untuk nampilin info penting atau gambar yang mau disorot. Tapi, kadang popup yang nggak bisa menyesuaikan ukuran layar bikin ribet pengguna, apalagi kalo buka lewat HP. Di tutorial kali ini, kita bakal belajar bikin popup yang bisa menyesuaikan ukuran layar dengan mudah, pake HTML dan CSS aja. Jadi, ntar popup-nya bisa keliatan cakep di laptop, HP, atau perangkat lainnya. Yuk, kita mulai!
Dengan mengikuti tutorial ini, kamu akan dapat menguasai teknik dasar dalam membuat popup responsif yang akan menyesuaikan tampilannya sesuai dengan ukuran layar pengguna. Tidak perlu jadi ahli dalam pemrograman, cukup ikuti langkah-langkahnya secara perlahan. Dengan demikian, kamu akan dapat meningkatkan pengalaman pengguna pada situs webmu, sehingga pengunjung dapat dengan mudah mengakses konten tanpa hambatan.
Jadi, ayo kita mulai dengan langkah pertama: menyiapkan struktur dasar HTML dan memberikan gaya menggunakan CSS. Dengan sedikit kesabaran dan kreativitas, kamu akan segera memiliki popup yang responsif dan menarik untuk situs webmu!
Struktur kode Pop Up secara keseluruhan
Nah , Hasil dari kode Pop Up sebagai berikut ya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Responsif</title>
<link rel="stylesheet" href="styles.css">
<style>
.popup-container {
display: none;
width: 80%;
max-width: 380px;
height: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 7px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 3px;
z-index: 9999;
box-sizing: border-box;
}
.popup-content {
position: relative;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
cursor: pointer;
z-index: 9999;
}
.popup-content img {
max-width: 100%;
height: auto;
border-radius: 3px;
display: block;
margin: auto;
}
@media screen and (max-width: 600px) {
.popup-container {
width: 90%;
}
}
</style>
</head>
<body>
<button id="show-popup">Tampilkan Popup</button>
<div class="popup-container">
<div class="popup-content">
<span class="close-btn">×</span>
<img src="gambar-popup.jpg" alt="Gambar Popup">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Selanjutnya kita masuk di Tutorialnya , Langkah pertama kita masukan kode css berikut ini
.popup-container {
display: none;
width: 80%;
max-width: 380px;
height: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 7px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 3px;
z-index: 9999;
box-sizing: border-box;
}
.popup-content {
position: relative;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
cursor: pointer;
z-index: 9999;
}
.popup-content img {
max-width: 100%;
height: auto;
border-radius: 3px;
display: block;
margin: auto;
}
@media screen and (max-width: 600px) {
.popup-container {
width: 90%;
}
}
Setelah itu , Berikutnya masukan kode dibawah ini ke tag </body>
document.getElementById('show-popup').addEventListener('click', function() {
document.querySelector('.popup-container').style.display = 'block';
});
document.querySelector('.close-btn').addEventListener('click', function() {
document.querySelector('.popup-container').style.display = 'none';
});
Note :
Ganti kode yang ditandai dengan warna merah dengan url gambar kamu
Nah mudah bukan? Sekian tutorial ini dan jangan lupa lihat juga tutorial kami yang lain ya.
Comments0