Hai sobat coder kali ini admin akan membagikan tutorial sederhana namun sering di gunakan dalam pembuata sebuah website, admin akan coba membuat menu pop up modal menggunakan css dan html dan sedikit javascript Disini kita akan membuat file html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Pop-up</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="openModalBtn">Buka Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Ini adalah modal pop-up sederhana.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
setelah membuat selesai membuat file html kemudian buat file css,Setelah selesai membuat file css hubungkan dengan file html yang telah dibuat terakhir disini saya akan menambahakan sedikit file javascript agar fungsi pop up bisa berjalan dengan baik
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Kemudian terakhir kita buat fungsi pop up menu menggunakan javascript
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModalBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
0 Komentar