Menu
How to make modal without JavaScript code with just HTML and CSS?
I have a project that I can't use JavaScript and I need modal.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>
</div>
</div>
</div>
</body>
</html>
937
asked May 13 '26 15:05
Here is another simple solution using CSS :target and anchor links.
dialog { display: block; }
dialog:not(:target):not([open]) { display: none; }<html>
<body>
<p>
<a href="#dialog">Open dialog</a>
</p>
<dialog id="dialog">
<h2>Dialog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#!">Close</a>
</dialog>
</body>
</html>as very very simple like this
* {
font-family:"Segoe UI",sans-serif;
}
input[type='checkbox']{
display:none;
}
#btn {
padding:5px 10px;
background: yellowgreen;
color:#fff;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
#cnt {
position: fixed;
width: 100vw;
height: 100vh;
background: hotpink;
top: 0;
left: 0;
display:flex;
align-items:center;
justify-content: center;
pointer-events:none;
display:none;
}
.close {
position: fixed;
top: 20px;
right: 20px;
display:none;
cursor:pointer;
}
input:checked + div + #cnt {
display:flex;
}
input:checked + div + #cnt + .close {
display:block;
}<label>
<input type="checkbox">
<div id="btn">OPEN</div>
<div id="cnt">SOME CONTENT</div>
<div class="close">X</div>
</label>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
