Creating a Modal Popup Using HTML and CSS Only

Alizeh Codes January 28, 2025

 

Creating a Modal Popup Using HTML and CSS Only

Modal Popup, JavaScript basic projects for beginners

Modal Popup

Modal popups are a great way to grab a user’s attention and provide them with important information or functionality without navigating away from the current page. In this blog, we’ll learn how to create a simple and elegant modal popup using only HTML and CSS.

What is a Modal Popup?

A modal popup is a dialog box that appears on top of the main content, typically dimming the background to emphasize the modal’s content. It is widely used for alerts, forms, and confirmation dialogs.

HTML Structure

Let’s start by creating the basic HTML structure for our modal popup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Modal Popup</title>
</head>
<body>
    <div class="wrapper">
        <a href="#modalbox">Open to Modal Popup</a>
    </div>

    <div id="modalbox" class="modal">
        <div class="modalcontent">
            <h1>CSS Modal</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quis, debitis mollitia sapiente praesentium, doloremque velit vel temporibus itaque eos corporis!</p>
            <a href="#" class="modalclose">&times;</a>
        </div>
    </div>
</body>
</html>

CSS Styling

Now let’s style our modal to make it functional and visually appealing.

body{
    margin: 0;
    padding: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff358f;
    height: 100vh;
}
.wrapper a{
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    text-decoration: none;
    color: #000;
}
.modal{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s;
    visibility: hidden;
    opacity: 0;
}
.modal:target{
    visibility: visible;
    opacity: 2;
}
.modalcontent{
    position: relative;
    background: #fff;
    width: 500px;
    max-width: 90%;
    padding: 1em 2em;
    border-radius: 4px;
}
a{
    font-size: 21px;
    font-weight: 600;
}
.modalclose{
    position: absolute;
    top: 0;
    right: 15px;
    text-decoration: none;
    color: #585858;
    font-size: 36px;
}

Adding Functionality with CSS Only

While JavaScript is often used to handle modal visibility, we can achieve a similar effect using CSS and the :target pseudo-class.

Updated HTML for CSS-Only Modal

<body>
    <div class="wrapper">
        <a href="#modalbox">Open to Modal Popup</a>
    </div>

    <div id="modalbox" class="modal">
        <div class="modalcontent">
            <h1>CSS Modal</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quis, debitis mollitia sapiente praesentium, doloremque velit vel temporibus itaque eos corporis!</p>
            <a href="#" class="modalclose">&times;</a>
        </div>
    </div>
</body>

Additional CSS for :target

/* CSS for :target */

.modal:target{
    visibility: visible;
    opacity: 2;
}

How It Works

  • The href="#modal" in the link sets the #modal element as the target when clicked.

  • The :target pseudo-class makes the modal visible by changing its display property to flex.

  • The close button links back to #, which removes the target state and hides the modal.

  • Watch Now.

Conclusion

You’ve just created a fully functional modal popup using only HTML and CSS. This method is lightweight and works well for simple use cases. For more dynamic behavior, consider using JavaScript, but CSS provides an excellent solution for basic modal functionality.

Creating a Modal Popup Using HTML and CSS Only

   Watch Full Tutorial 

Tags:

Post a Comment

0 Comments