pop up screen when click on image-CodePudding

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 >
        <button  id="home" onclick="javascript:location.href='index.html'">Home
                            <i ></i>
                        </button>
        <button  id="about" onclick="javascript:location.href='aboutMe.html'">About Me
                            <i ></i>
                        </button>
        <button  id="portfolio" onclick="javascript:location.href='portfolio.html'">Exp
                            <i ></i>
                        </button>
        <button  id="project" onclick="javascript:location.href='project.html'">Projects</button>
        <button  id="contact" onclick="javascript:location.href='contact.html'">Contact
                            <i ></i>
                        </button>
      </div>
    </div>

    <h1><span>Projects</span><span ></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 >
      <div >
        <div >
          <a href="#SchoolProject" >School Projects</a>
        </div>
      </div>

      <div >
        <a href="#PersonalProject" >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" >
        <span >&times;</span>
        <img  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! :)

CodePudding user response：

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.