Modal System

Pure CSS Modals Using :target Pseudo-Class

Welcome to the Modal System

This modal system is built entirely with HTML and CSS—no JavaScript required! Click the buttons below to see different modal styles and animations.

Information Modal Success Modal Warning Modal Form Modal

💡 How it works: These modals use the :target pseudo-class. When you click a button, the URL hash changes (e.g., #modal-info), and CSS displays the corresponding modal. Click the × or outside the modal to close it!

Key Features

✨ Pure CSS - no JavaScript needed
🎨 Multiple animation styles (fade, slide, scale)
📱 Fully responsive
⌨️ Keyboard accessible (ESC key works via # link)
🔗 URL-based state management
🎯 Click outside to close
♿ Screen reader friendly

This modal uses a slide-down animation. The content slides in from the top using transform: translateY(-50px) in the keyframes.

Animation Code

The animation is defined like this:

@keyframes modalSlideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Different Modal Types

Fade: Simple opacity transition
Slide: Slides in from top (this modal)
Scale: Zooms in from center (try the warning modal)

Welcome to the Modal System

Key Features

ℹ️ Information

How the :target Pseudo-Class Works

✅ Success!

Animation Code

Different Modal Types

⚠️ Warning

Advantages of CSS-Only Modals

Limitations to Consider

📝 Contact Form