Article Categories

Selected Reading

How to create a modal popup using JavaScript and CSS?

Javascript CSS Web Development Front End Technology

Creating a modal popup means adding a dialog box, which generates on click of a button and closes when the user clicks anywhere outside of the popup or on the close button.

Basic Modal Structure

A modal consists of three main components −

Modal overlay − The background that covers the entire screen
Modal content − The actual popup box
JavaScript handlers − To show/hide the modal

Example

The following example creates a complete modal popup with header, body, and close functionality −

<!DOCTYPE html>
<html>
<head>
<style>
    .popup {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        animation: fadeIn 0.3s ease-out;
    }
    
    .popup-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        width: 90%;
        max-width: 500px;
        animation: slideIn 0.3s ease-out;
    }
    
    .popup-header {
        padding: 20px;
        background-color: #8AC1E0;
        color: white;
        border-radius: 8px 8px 0 0;
        position: relative;
    }
    
    .popup-header h2 {
        margin: 0;
        font-size: 1.5rem;
    }
    
    .close-btn {
        position: absolute;
        right: 15px;
        top: 15px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        line-height: 1;
    }
    
    .close-btn:hover {
        color: #ddd;
    }
    
    .popup-body {
        padding: 20px;
        line-height: 1.6;
    }
    
    .open-btn {
        background-color: #4CAF50;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }
    
    .open-btn:hover {
        background-color: #45a049;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideIn {
        from { 
            opacity: 0;
            transform: translate(-50%, -60%);
        }
        to { 
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }
</style>
</head>
<body>
    <h2>Modal Popup Demo</h2>
    <button id="openModal" class="open-btn">Open Modal</button>
    
    <div id="myModal" class="popup">
        <div class="popup-content">
            <div class="popup-header">
                <span class="close-btn">&times;</span>
                <h2>Welcome!</h2>
            </div>
            <div class="popup-body">
                <p>This is a modal popup created with CSS and JavaScript.</p>
                <p>You can click the × button, press Escape, or click outside to close it.</p>
            </div>
        </div>
    </div>
    
    <script>
        const modal = document.getElementById('myModal');
        const openBtn = document.getElementById('openModal');
        const closeBtn = document.querySelector('.close-btn');
        
        // Open modal
        openBtn.onclick = function() {
            modal.style.display = 'block';
        }
        
        // Close modal when clicking the × button
        closeBtn.onclick = function() {
            modal.style.display = 'none';
        }
        
        // Close modal when clicking outside the content
        window.onclick = function(event) {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        }
        
        // Close modal with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && modal.style.display === 'block') {
                modal.style.display = 'none';
            }
        });
    </script>
</body>
</html>

A button labeled "Open Modal" appears on the page. When clicked, a centered modal popup with a blue header containing "Welcome!" and a close button (×) slides in with a fade animation. The modal can be closed by clicking the × button, clicking outside the modal, or pressing the Escape key.

Key CSS Properties

Property	Purpose
`position: fixed`	Keeps modal positioned relative to viewport
`z-index: 1000`	Ensures modal appears above other content
`transform: translate(-50%, -50%)`	Centers the modal perfectly
`rgba(0, 0, 0, 0.5)`	Creates semi-transparent background overlay

Conclusion

Creating a modal popup requires CSS for styling and positioning, plus JavaScript for show/hide functionality. The key is using fixed positioning with a semi-transparent overlay and centering the content with CSS transforms.

Nishtha Thakur

Updated on: 2026-03-15T11:17:20+05:30

673 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next