单击图像时弹出屏幕

Question

I am doing a personal profile page, with some conclusion of projects I did. I plan to list those projects as images, when I click on that image there will be a screen pop up with simple summary and link to my source code.

My work done:

 var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById("myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function() { modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; }

 html { scroll-behavior: smooth; } #SelfProject { margin-top: 100%; padding-bottom: 25%; } #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover { opacity: 0.7; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ 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.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) } } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px) { .modal-content { width: 100%; } } *{ margin: 0; padding: 0; box-sizing: border-box; list-style: none; } :root{ --color-primary: #191d19; --color-secondary: #27AE60; --color-white: #FFFFFF; --color-black: #000; --color-grey0: #f8f8f8; --color-grey-1: #dbe1e8; --color-grey-2: #b2becd; --color-grey-3: #6c7983; --color-grey-4: #454e56; --color-grey-5: #2a2e35; --color-grey-6: #12181b; --br-sm-2: 14px; --box-shadow-1: 0 3px 15px rgba(0, 0, 0, .3); } body{ background-color:#E0FFFF; font-size: 1.1rem; color: var(--color-grey-4); font-family: 'Vazirmatn', sans-serif; transition: all .4s ease-in-out; } a{ display: inline-block; text-decoration: none; color: inherit; font-family: inherit; } header{ height: 100vh; color: var(--color-white); overflow: hidden; } h1{ text-align: center; } .section{ transform: translateY(-100%) scale(0); transition: all .4s ease-in-out; background-color: var(--color-primary); } .sec1{ display: none; transform: translateY(0) scale(1); background-color: rgba(38, 95, 228, 0.849); } .active { display: block; animation: scaleAnim is ease-in-out; @keyframes scaleAnim{ 0%{ transform: translateY(-100%) scaleY(0) } 100%{ transform: translateY(0) scaleY(1) } } } /* Controls */ .buttons{ position: fixed; z-index: 10; top: 50%; right: 3%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-50%); } .button:hover { background-color: #4CAF50; color: white; } .button{ padding: 1rem; cursor: pointer; background-color: var(--color-grey0); width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: .7rem 0; box-shadow: var(--box-shadow-1); } /* Header content */ .header-content{ display: grid; grid-template-columns: repeat(2, 1fr); height: 100%; } .h-shape{ transition: all .4s ease-in-out; width: 65%; height: 100%; background-color: var(--color-secondary); position: absolute; left: 0; top: 0; z-index: -1; clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); } /* .image{ border-radius: var(--br-sm-2); height: 100%; width: 65%; margin-left: 4rem; transition: all .4s ease-in-out; } */ img{ width: 50%; height:50%; object-fit: cover; transition: all .4s ease-in-out; } .column { float: left; width: 45%; padding: 10px; height: 300px; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .column{ width: 100%; } } .white-box { background-color: white; color:#000; text-align: center; width: 80%; } .right-header{ display: flex; flex-direction: column; justify-content: center; padding-right: 18rem; } .right-content{ display: flex; flex-direction: column; justify-content: center; padding-right: 18rem; } .name{ font-size: 3rem; } span{ color: var(--color-secondary); } p{ margin: 1.5rem 0; line-height: 2rem; } /* Independent component */ /* download CV button */ .btn-con{ display: flex; align-self: flex-start; } .main-btn{ border-radius: 30px; color: inherit; font-weight: 600; position: relative; border: 1px solid var(--color-secondary); display: flex; align-self: flex-start; display: flex; align-items: center; overflow: hidden; } .btn-text{ padding: 0 2rem; } /* Cannot show download pic after adding this */ .btn-icon{ background-color: var(--color-secondary); display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 1rem; } h2{ position: relative; text-transform: uppercase; font-size: 4rem; font-weight: 400; } span{ color: var(--color-secondary); } .bg-text{ position: absolute; top: 50%; left: 50%; color: var(--color-grey-5); transition: all .4s ease-in-out; z-index: -1; transform: translate(-50%, -50%); font-weight: 800; font-size: 6.3rem; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" , initial-scale="1.0"> <title>Projects</title> <link rel="stylesheet" href="css/ImageModel.css"> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap" rel="stylesheet"> </head> <body> <div id="main"> <div id="header"> <div class="buttons"> <button class="button control-1" id="home" onclick="javascript:location.href='index.html'">Home <i class="fas fa-home"></i> </button> <button class="button control-2" id="about" onclick="javascript:location.href='aboutMe.html'">About Me <i class="fas fa-user"></i> </button> <button class="button control-3" id="portfolio" onclick="javascript:location.href='portfolio.html'">Exp <i class="fas fa-briefcase"></i> </button> <button class="button control-4" id="project" onclick="javascript:location.href='project.html'">Projects</button> <button class="button control-5" id="contact" onclick="javascript:location.href='contact.html'">Contact <i class="fas fa-envelope-open"></i> </button> </div> </div> <h1><span>Projects</span><span class="bg-text"></span></h1> <p>Here are some of my passion projects as well as class projects! </p> <p>enjoy analyzing sports, social media, and food-related data. I have also done game designing and privacy-related research.</p> <p>Please feel free to shoot me an email to discuss or give ideas to any of the projects listed below!</p> <div class="row"> <div class="column"> <div class="btn-con"> <a href="#SchoolProject" class="main-btn">School Projects</a> </div> </div> <div class="btn-con"> <a href="#PersonalProject" class="main-btn">Personal Projects</a> </div> </div> <div id="SchoolProject"> <h1><span>School Projects </span></h1> <img id="myImg" src="images/timetablingSystem.png" alt="Timetabling System" style="width:100%;max-width:300px"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> </div> <div id="PersonalProject"> <h1><span>Personal Projects </span></h1> </div> </div> </body> </html>

The image can be shown in the school project section, however, I am unable to click it. I am doing something like this

Any help would be great, thanks in advance! :)

Answer 1

You are not linking your JavaScript in your HTML file

Just add it before the closing body tag:

  <script src="main.js"></script>

replace main.js with your JavaScript file name.