Create Interactive Tiles with Modals for Engaging Doc Sites

General 4 Minutes

As more users demand interactive and engaging content, developers constantly look for ways to make their websites more dynamic. One effective way to achieve this is through the use of interactive tiles. Tiles are great for organizing content in a visually appealing way, while modals provide a smooth and unobtrusive way to present more detailed information when needed.

In this tutorial, we’ll explore how to create an interactive tile layout with modals using a combination of HTML, CSS, and JavaScript. Whether you’re building a technical doc site, a portfolio, or an educational platform, this feature allows you to display concise information in an easily accessible format, while giving users the option to explore more details in a modal pop-up.

Steps

1. Create the HTML structure.

Start by creating the basic HTML structure for the tiles and the modal. In this code sample, the tiles display using a simple grid layout, each opening a modal with detailed content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Tiles with Modal</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Tile Container -->
    <div class="tile-container">
        <div class="tile" onclick="openModal('javascript')">
            <h3>JavaScript Basics</h3>
            <p>Learn the fundamentals of JavaScript, including syntax, variables, and functions.</p>
        </div>
        <div class="tile" onclick="openModal('python')">
            <h3>Python Tutorials</h3>
            <p>Start with Python programming and learn how to write simple scripts.</p>
        </div>
        <div class="tile" onclick="openModal('html-css')">
            <h3>HTML & CSS</h3>
            <p>Understand the building blocks of web development: HTML and CSS.</p>
        </div>
        <div class="tile" onclick="openModal('api')">
            <h3>API Integration</h3>
            <p>Learn how to work with APIs, including making requests and handling responses.</p>
        </div>
    </div>

    <!-- Modal Structure -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2 id="modal-title"></h2>
            <p id="modal-content"></p>
        </div>
    </div>

    http://script.js
</body>
</html>

2. Add CSS styling for the tiles and modal.

/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
}

/* Tile Container Layout */
.tile-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Individual Tile */
.tile {
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.tile:hover {
    transform: translateY(-10px);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.tile h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.tile p {
    font-size: 1em;
    margin-bottom: 20px;
}

/* Modal Styling */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
}

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

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

3. Add JavaScript to handle modal functionality.

The JavaScript is responsible for opening and closing the modal, as well as updating the content in the modal dynamically based on the tile that is clicked.

Note: This functionality isn’t required to deploy the tiles and can be omitted if necessary.

// script.js

// Open the modal and change its content based on the tile clicked
function openModal(topic) {
    var modal = document.getElementById("modal");
    var modalTitle = document.getElementById("modal-title");
    var modalContent = document.getElementById("modal-content");

    // Update modal content based on the clicked tile
    if (topic === 'javascript') {
        modalTitle.innerHTML = "JavaScript Basics";
        modalContent.innerHTML = "JavaScript is a versatile language used for both client-side and server-side development. Learn the basics, including syntax, variables, functions, and how to interact with the DOM.";
    } else if (topic === 'python') {
        modalTitle.innerHTML = "Python Tutorials";
        modalContent.innerHTML = "Python is an easy-to-learn programming language that emphasizes code readability. Start with simple scripts and build up to more complex applications.";
    } else if (topic === 'html-css') {
        modalTitle.innerHTML = "HTML & CSS";
        modalContent.innerHTML = "HTML and CSS are the foundational technologies for web development. Learn how to structure web pages and style them to create beautiful, responsive designs.";
    } else if (topic === 'api') {
        modalTitle.innerHTML = "API Integration";
        modalContent.innerHTML = "APIs allow applications to communicate with each other. Learn how to make requests to external services and handle responses to integrate APIs into your projects.";
    }

    // Display the modal
    modal.style.display = "block";
}

// Close the modal
function closeModal() {
    var modal = document.getElementById("modal");
    modal.style.display = "none";
}

// Close the modal when clicking outside of it
window.onclick = function(event) {
    var modal = document.getElementById("modal");
    if (event.target === modal) {
        modal.style.display = "none";
    }
}

4. Implement the code in your documentation site.

Unstyled code implemented.

Note: If you’re applying these samples to WordPress, you must have an Explorer account or higher. If have a free WordPress account, custom JavaScript, HTML, and CSS are restricted.

  1. Add HTML and JavaScript: Copy the HTML structure and JavaScript code into your page or template file. You can include this code in the main body of your page.
  2. Add the CSS: Include the CSS either within a <style> tag inside the <head> section of your HTML or in a separate CSS file (as referenced in the <link> tag).
  3. Customize Content: You can add more tiles or update the modal content to fit your needs. For example, if you want to provide links to tutorials or more detailed documentation in the modal, you can replace the static text inside the modalContent.innerHTML with HTML elements like .<a> for links.

Try Your Code

Use a tool like CodePen to instantly see what your code looks like and if it works before incorporating it into your doc site.

Conclusion

This tutorial demonstrates how to create an interactive tile layout with a modal for displaying detailed information on a website. The combination of HTML for structure, CSS for styling, and JavaScript for functionality provides an engaging and user-friendly way to organize and present content. You can adapt this setup for different use cases, such as technical documentation, tutorial sites, or knowledge bases, by adjusting the content and styles to fit your needs.

Published

Leave a comment