Nouvelle Techno Watch on YouTube

On crée des fenêtres modales sans framework

3 min read 2 hours ago

Published on Oct 11, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through creating modal windows using HTML, CSS, and JavaScript without relying on any frameworks. Modal windows are useful for displaying additional content or alerts without navigating away from the current page, making them a valuable tool for enhancing user experience.

Step 1: Set Up Your HTML Structure

Begin by creating the foundational HTML structure for your modal.

Create a basic HTML file and include the following elements:
- A button to trigger the modal.
- A modal container with an overlay.
- Content within the modal, including a close button.

Here’s a sample HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Window Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openModal">Open Modal</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Modal Header</h2>
            <p>This is the content of the modal.</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: Style the Modal with CSS

Next, you need to style the modal to ensure it appears correctly on the page.

Add the following CSS to your styles.css file:

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

Step 3: Implement the JavaScript Functionality

Now, you will add JavaScript to handle the opening and closing of the modal.

In your script.js file, include the following code:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("openModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Conclusion

You have now successfully created a modal window using HTML, CSS, and JavaScript without any frameworks. This modal can display additional content while allowing users to remain on the same page.

Key Takeaways

Modal windows enhance user experience by providing contextual information without navigating away.
Ensure to handle opening and closing events effectively to maintain usability.
You can customize the modal’s appearance and behavior further to fit your project needs.

Next Steps

Consider exploring more advanced features such as animations, dynamic content loading, or integrating your modal with a backend service for an improved user experience.

Table of Contents

Recent