Jinsi ya Kutengeneza Dynamic Modal with Multiple Content kwa JavaScript

Dynamic Modals zinawawezesha watumiaji kuona popup interactive na content tofauti bila ku-refresh page. Hii ni muhimu kwa image galleries, forms, au notifications kwenye web pages.

Hatua kwa Hatua
1️⃣ Unda HTML Structure

2️⃣ Andika JavaScript kwa Dynamic Modal
const modal = document.getElementById("myModal");
const contentArea = document.getElementById("contentArea");
const closeModal = document.getElementById("closeModal");
const buttons = document.querySelectorAll(".openModal");

// Content tofauti
const contents = {
content1: "

Hii ni Content 1

Maelezo ya Content 1 hapa.

",
content2: "

Hii ni Content 2

Maelezo ya Content 2 hapa.

"
};

// Fungua modal na content
buttons.forEach(btn => {
btn.addEventListener("click", () => {
const key = btn.getAttribute("data-content");
contentArea.innerHTML = contents[key];
modal.style.display = "flex";
});
});

// Funga modal
closeModal.addEventListener("click", () => {
modal.style.display = "none";
});

// Funga modal kama user anabonyeza nje ya content
window.addEventListener("click", (e) => {
if (e.target === modal) modal.style.display = "none";
});

3️⃣ Faida za Dynamic Modals

Hufanya website kuwa interactive na professional.

Inaruhusu multiple content kwenye modal moja.

Hakuna refresh ya page, yote ni client-side.

Inafaa kwa galleries, forms, notifications, na info popups.

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website: https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo): https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka: https://wa.me/255693118509