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.