Kattintásra felugró hírlevél mező: Így készíts képből interaktív gombot!

**3. Stílus és Elrejtés (CSS)**
Most jön a stílus. A CSS segítségével teheti vonzóvá a képet, és hozhatja létre a felugró ablak kinézetét. Kezdetben a `newsletter-popup` elemet rejtse el.

„`css
.interactive-image {
cursor: pointer; /* Jelezze, hogy kattintható */
transition: transform 0.3s ease-in-out; /* Animáció hoverre */
max-width: 100%; /* Reszponzivitás */
height: auto;
display: block;
margin: 20px auto;
}

.interactive-image:hover {
transform: scale(1.03); /* Kicsit nagyobb lesz hoverre */
}

.popup-container {
display: none; /* Alapértelmezetten rejtett */
position: fixed; /* Fix pozíció, mindig látható marad */
z-index: 1000; /* Legfelülre kerül */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Görgetés, ha túl nagy a tartalom */
background-color: rgba(0,0,0,0.6); /* Sötét, áttetsző háttér */
display: flex;
justify-content: center;
align-items: center;
}

.popup-content {
background-color: #fefefe;
margin: auto;
padding: 30px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
position: relative;
border-radius: 10px;
text-align: center;
animation: fadeIn 0.5s; /* Animáció megjelenéskor */
}

.close-button {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
position: absolute;
top: 10px;
right: 20px;
}

.close-button:hover,
.close-button:focus {
color: #000;
text-decoration: none;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}

/* Űrlap elemek stílusa */
.popup-content form input[type=”email”] {
width: calc(100% – 20px);
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}

.popup-content form button[type=”submit”] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

.popup-content form button[type=”submit”]:hover {
background-color: #45a049;
}
„`
A CSS animációk, mint a `fadeIn` segítenek a felugró ablak elegáns megjelenítésében. A reszponzivitás érdekében használjon százalékos szélességet és `max-width` értékeket.

**4. Interaktív Viselkedés (JavaScript)**
Végül, a JavaScript hozza össze az egészet. Ez felelős azért, hogy a képre kattintva megjelenjen az ablak, a bezárás gombra kattintva pedig eltűnjön.

„`javascript
document.addEventListener(‘DOMContentLoaded’, function() {
const trigger = document.getElementById(‘newsletter-trigger’);
const popup = document.getElementById(‘newsletter-popup’);
const closeButton = popup.querySelector(‘.close-button’);
const form = document.getElementById(‘newsletter-form’);

// Megjeleníti a felugró ablakot
if (trigger) {
trigger.addEventListener(‘click’, function() {
popup.style.display = ‘flex’; // A CSS ‘display: flex’ értékét használjuk a centírozáshoz
});
}

// Bezárja a felugró ablakot
if (closeButton) {
closeButton.addEventListener(‘click’, function() {
popup.style.display = ‘none’;
});
}

// Bezárja a felugró ablakot, ha a háttérre kattintunk
if (popup) {
window.addEventListener(‘click’, function(event) {
if (event.target === popup) {
popup.style.display = ‘none’;
}
});
}

// Itt kezelheti a form elküldését, pl. AJAX-szal vagy egy hírlevél szolgáltató API-jával
if (form) {
form.addEventListener(‘submit’, function(event) {
event.preventDefault(); // Megakadályozza a lap újratöltését
const emailInput = form.querySelector(‘input[type=”email”]’);
const userEmail = emailInput.value;

// Példa: Küldés Mailchimp-re vagy más szolgáltatóra (itt kellene a valós integráció)
console.log(‘Feliratkozási kísérlet ezzel az e-mail címmel:’, userEmail);
alert(‘Köszönjük a feliratkozást! Hamarosan küldjük az első hírlevelünket.’);
popup.style.display = ‘none’; // Bezárja az ablakot feliratkozás után
form.reset(); // Törli az űrlap tartalmát
});
}
});
„`
Ezt a JavaScript kódot helyezze el a HTML fájlja `` tagje elé, egy `