I’m working on a website where I need to display a modal popup when a user clicks a button. However, the modal doesn’t open when the button is clicked. I’m using basic HTML, CSS, and JavaScript to implement the modal. I followed some tutorials online, but it still doesn’t seem to work.
The modal doesn’t open when I click the button (Erfahren Sie mehr über mich).
I’ve followed tutorials and checked the code, but the modal remains hidden.
I’m using basic JavaScript to manipulate the modal’s visibility.
The btn.onclick function should trigger the modal to appear, but it doesn’t seem to work.
What I’ve tried:
I’ve checked the console for errors, but there are none.
I made sure the IDs and classes match between HTML, CSS, and JavaScript.
I’ve also tried modifying the display property in different ways (using block, flex, etc.), but it still doesn’t work.
Any help would be greatly appreciated! I’ve been stuck on this for a while.
Additional Information:
Browser: Chrome (latest version)
I’m not using any frameworks or libraries, just pure HTML, CSS, and JavaScript.
### JavaScript-Code:
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
### CSS-Code:
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In der Not für Sie da - Seniorenhilfe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<h1>In der Not für Sie da</h1>
<nav>
<ul>
<li><a href="#services">Leistungen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h2>Arbenita </h2>
<p>Liebevolle Seniorenbetreuung mit Herz und Erfahrung</p>
<button id="myBtn">Erfahren Sie mehr über mich</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Mein Name ist Arbenita , ich bin 39 Jahre alt, Mutter von vier wunderbaren Kindern und seit über 15 Jahren als Pflege- und Haushaltshilfe tätig.</p>
<p>Es ist mir eine Herzensangelegenheit, älteren Menschen zu helfen und ihren Alltag durch liebevolle Unterstützung und Fürsorge zu erleichtern. Mit meiner langjährigen Erfahrung in der Branche setze ich mich mit viel Engagement und Empathie dafür ein, den Menschen ein würdevolles und angenehmes Leben zu ermöglichen.</p>
<img src="deine-mama.jpg" alt="Foto von Arbenita ">
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>© 2025 Seniorenhilfe | Alle Rechte vorbehalten</p>
</footer>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>