1 Frage zu Interface

Question

Button klicken öffnet ein Overlay, schließt ein anderes. Erneutes Klicken schließt das geöffnete Overlay.

Accepted Answer

Um ein Overlay zu öffnen und ein anderes zu schließen, sowie das geöffnete Overlay durch erneutes Klicken zu schließen, kannst du JavaScript in Kombination mit HTML und CSS verwe... [mehr]

Accepted Answer

Um ein Overlay zu öffnen und ein anderes zu schließen, sowie das geöffnete Overlay durch erneutes Klicken zu schließen, kannst du JavaScript in Kombination mit HTML und CSS verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="" content="width=device-width, initial-scale=1.0"> <title>Overlay Beispiel</title> <style> .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; color: white; font-size: 2em; } </style> </head> <body> <button id="toggleOverlay">Overlay öffnen</button> <div id="overlay1" class="overlay"> Overlay 1 </div> <div id="overlay2" class="overlay"> Overlay 2 </div> <script> const button = document.getElementById('toggleOverlay'); const overlay1 = document.getElementById('overlay1'); const overlay2 = document.getElementById('overlay2'); button.addEventListener('click', () => { if (overlay1.style.display === 'flex') { overlay1.style.display = 'none'; } else { overlay1.style.display = 'flex'; overlay2.style.display = 'none'; // Schließt Overlay 2 } }); overlay1.addEventListener('click', () => { overlay1.style.display = 'none'; // Schließt Overlay 1 }); </script> </body> </html> ``` In diesem Beispiel wird beim Klicken auf den Button `toggleOverlay` Overlay 1 geöffnet und Overlay 2 geschlossen. Ein weiteres Klicken auf Overlay 1 schließt es wieder. Du kannst das Design und die Funktionalität nach deinen Bedürfnissen anpassen.

1 Frage zu Interface

Fragen und Antworten zum Thema Interface

Button klicken öffnet ein Overlay, schließt ein anderes. Erneutes Klicken schließt das geöffnete Overlay.