Recently, I created a unique popup using HTML. You can see the complete code (excluding CSS) here: https://codepen.io/nope99675/pen/BawrdBX. Below is the snippet of the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./homepage.css" />
<script src="./homepage.js" defer></script>
</head>
<body>
<div>
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="closebtn" onclick="togglePopup()">×</div>
<h2>What do you want to make?</h2>
</div>
</div>
<button type="button" class="Create" onclick="togglePopup()"> Create
<span class=button__icon>
<ion-icon name="add-outline"></ion-icon>
</span>
</button>
<button type="button" class="settings"> Settings
<span class="button__icon">
<ion-icon name="cog-outline"></ion-icon>
</span>
</button>
<button type="button" class="del"> Delete
<span class=button__icon>
<ion-icon name="trash-outline"></ion-icon>
</span>
</button>
<button type="button" class="feed"> Feedback
<span class="button__icon">
<ion-icon name="chatbubble-ellipses-outline"></ion-icon>
</span>
</button>
</div>
<script type="module" src="https://unpkg.com/ionicons@5/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5/dist/ionicons/ionicons.js"></script>
</body>
</html>
Additionally, I wrote some JavaScript for handling the pop-up functionality:
function togglePopup() {
document.getElementById("popup-1").classList.toggle(active);
};
However, there are a couple of issues with the current implementation. The popup is not appearing only when the designated button is clicked, and it's missing the desired background color (#fff). Furthermore, the close button in the corner isn't styled as intended. It should have a white text color against a black background. Can someone please assist with resolving these problems?