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
<button class="openModal" data-content="content1">Onyesha Content 1</button>
<button class="openModal" data-content="content2">Onyesha Content 2</button>

<div id="myModal" style="
display:none; position:fixed; top:0; left:0; width:100%; height:100%;
background: rgba(0,0,0,0.5); justify-content:center; align-items:center;">
<div id="modalContent" style="
background:white; padding:20px; border-radius:8px; min-width:300px;">
<span id="closeModal" style="cursor:pointer; float:right;">&times;</span>
<div id="contentArea"></div>
</div>
</div>

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: "<h2>Hii ni Content 1</h2><p>Maelezo ya Content 1 hapa.</p>",
content2: "<h2>Hii ni Content 2</h2><p>Maelezo ya Content 2 hapa.</p>"
};

// 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