diff --git a/pop-up/index.html b/pop-up/index.html new file mode 100644 index 0000000..cd43969 --- /dev/null +++ b/pop-up/index.html @@ -0,0 +1,33 @@ + + + + + + Simple Popups + + + +
+ + + +
+ + + + diff --git a/pop-up/script.js b/pop-up/script.js new file mode 100644 index 0000000..1d0789f --- /dev/null +++ b/pop-up/script.js @@ -0,0 +1,23 @@ +const content = { + about: "Uncommon Hacks is an RSO that organizes coding-related competitions on campus...", + schedule: "9:30 check-in, team formation...", + judging: "Once you've gotten a chance to work on your project...", + register: "Join the designathon by registering online...", + team: "Form a team of up to 5 people...", + faq: "Common questions about Uncommon Makes...", + contact: "Reach out to us via email...", + conduct: "Rules and guidelines for participants...", + speakers: "Meet our guest speakers..." +}; + +document.querySelectorAll(".popup-btn").forEach(button => { + button.addEventListener("click", () => { + const page = button.getAttribute("data-page"); + document.querySelector(".popup-text").innerHTML = content[page] || "Not Found"; + document.getElementById("popup").classList.add("visible"); + }); +}); + +document.querySelector(".close-btn").addEventListener("click", () => { + document.getElementById("popup").classList.remove("visible"); +}); diff --git a/pop-up/styles.css b/pop-up/styles.css new file mode 100644 index 0000000..c6fd6fb --- /dev/null +++ b/pop-up/styles.css @@ -0,0 +1,43 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; +} + +.sidebar { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; +} + +.popup { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 60%; + height: 60%; + background: white; + border: 1px solid black; + padding: 20px; + display: none; + overflow-y: auto; +} + +.popup.visible { + display: block; +} + +.popup-content { + position: relative; +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + font-size: 20px; +}