Modal Image Issue

I’m having some issues with the modal image I’m trying to create for a website I’m making. I’m not able to click on the image at all but I am able to hover over it. The main idea is to get the modal image to work when I click on my “About” nav link.

I was using this link as a reference on how to structure the modal image.
https://www.w3schools.com/howto/howto_css_modal_images.asp

Below is a code of my HTML

<html>


  <!--Importation of CSS and Javascript-->
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="jesusjavascript.js"></script>

  <main id="main">
    <head>
    <h1 id="title"> The life of Jesus</h1>
    </head>

    <nav id="nav-bar">

      <div id="About">
        
      About
      </div>
      <div id="#Forum">
        Forum
      </div>
      <div id="#Video">
        Videos
      </div>
      <div id="#Bible Dictionary">
        Bible Dictionary
      </div>
    </nav>
  </main>

<body id="body">

  

  
<!-- Trigger the Modal -->
    
<img id="myImg" src="assets/thefloodofjesus.gif" alt="Moses parts the sea with the diciples"
style="width:100%; max-width:300px">


<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>


    <!--Seagul-->

    <marquee direction="right">
      <img id="seagul" src="https://cdn2.scratch.mit.edu/get_image/gallery/4422115_170x100.png" alt="">
    </marquee>

    <!-- Yellow Cross-->

    <marquee>
      <img id="yellow_cross_heart_image" img
        src="https://icons.iconarchive.com/icons/uiconstock/flat-halloween/256/Halloween-Heart-Cross-2-icon.png"
        alt="cross">
    </marquee>
    <figcaption id="img-caption"> A white heart with a cross on the topside and yellow background</figcaption>




    <!--Tribute link code & Yellow bible text image-->

    <div id="tribute-info">Tribute info</div>

    <marquee>
      <a href="https://www.openbible.info/topics" target="_blank">
        <img id="yellow_biblical_text" src="assets/cooltext391207635180624.png" alt="Old yellow bible text">
    </marquee>


 

  <footer>
    <div id="arrow_div">
      <img id="arrow_foot0" src="assets/PinClipart.com_power-up-clipart_3336549.png">
      <img id="arrow_foot1" src="assets/PinClipart.com_power-up-clipart_3336549.png">
      <img id="arrow_foot2" src="assets/PinClipart.com_power-up-clipart_3336549.png">
    </div>
  </footer>

</body>

</html>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.