Modal Popup

<!DOCTYPE html>
<html>
<head>
  <style>
body { font-family: Arial; }
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}
.modal:target {
  display: flex; /* Show when targeted */
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
}  </style>
</head>
<body>
  <a href="#myModal">Open Modal</a>
  <div id="myModal" class="modal">
&lt;div class="modal-content"&gt;
  &lt;h3&gt;Modal Title&lt;/h3&gt;
  &lt;p&gt;This is a CSS-only modal.&lt;/p&gt;
  &lt;a href="#"&gt;Close&lt;/a&gt;
&lt;/div&gt;  </div>
</body>
</html>

Explanation:

Uses CSS :target selector instead of JS.
Clicking link shows the modal.

Comments

Leave a Reply Cancel reply

More posts

Simple Blog System

User Login & Registration

To-Do List App

Image Upload System