【Day 4】前端開發之旅－動態內容

2024 iThome 鐵人賽

DAY 4

JavaScript

「前端開發快速入門：從基礎到現代框架的實戰之旅」系列第 4 篇

16th鐵人賽

dcheng0915

2024-09-18 23:50:34

66 瀏覽

分享至

今天要做的是關於Project項目的動態內容，也就是點擊某個Project的區塊後，會顯示更多詳細的內容。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: gray;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            max-width: 1024px;
            margin: 0 auto;
        }
        .header {
            /* min-height: 100px; */
            background-color: lightskyblue;
        }
        .header-title {
            padding: 8px 0 8px 16px;
        }
        .main {
            flex-grow: 1;
            background-color: lightgrey;
            padding: 16px 0;
        }
        .main-section {
            padding: 0 16px;
            margin: 0 0 16px;
        }
        .main-section-projects {
            padding: 8px 0 0 16px;
        }
        .main-section-projects-item {
            padding: 8px 0;
        }
        .footer {
            /* min-height: 100px; */
            background-color: lightslategray;
        }
        .footer-text {
            padding: 8px 0;
            text-align: center;
        }

        .modal {
            display: none;
            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: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>

    <script>
        const modal = document.getElementById("projectModal");
        const modalTitle = document.getElementById("modalTitle");
        const modalDescription = document.getElementById("modalDescription");

        function showProjectDetails(projectId) {
            const projectDetails = getProjectDetails(projectId);
            modalTitle.textContent = projectDetails.title;
            modalDescription.textContent = projectDetails.description;
            modal.style.display = "block";
        }

        function closeProjectDetails() {
            modal.style.display = "none";
        }

        function getProjectDetails(projectId) {
            const projects = {
                1: { title: "Project 1", description: "詳細描述 Project 1..." },
                2: { title: "Project 2", description: "詳細描述 Project 2..." },
                3: { title: "Project 3", description: "詳細描述 Project 3..." }
            };
            return projects[projectId];
        }
        
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="header-title">My Blog</h1>

            <nav>
                <a href="index.html">Home</a>
                <a href="projects.html">Projects</a>
            </nav>
        </header>

        <main class="main">
            <section class="main-section">
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Contact</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Experience</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Education</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Skills</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
            </section>

            <section class="main-section">
                <h2>Projects</h2>
                <div class="main-section-projects">
                    <section class="main-section-projects-item" onclick="showProjectDetails(1)">
                        <h3>Project 1</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>

                    <section class="main-section-projects-item" onclick="showProjectDetails(1)">
                        <h3>Project 2</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>
                    
                    <section class="main-section-projects-item" onclick="showProjectDetails(1)">
                        <h3>Project 3</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
                    </section>
                </div>
            </section>

            <div id="projectModal" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="closeProjectDetails()">&times;</span>
                    <h2 id="modalTitle"></h2>
                    <p id="modalDescription"></p>
                </div>
            </div>
        </main>
        
        <footer class="footer">
            <p class="footer-text">Copyright © 2024 My Blog</p>
        </footer>
    </div>
</body>
</html>