如何阻止导航栏干扰模式关闭按钮的功能？

Question

I copied some code for an image modal, along with a script that allows the image to be enlarged on click, and disappear when the X button is clicked.

However, The X button does nothing when clicked. I think it has something to do with the navbar, because the X button works if I remove it. Are there other solutions to this issue besides removing (or moving) my navbar? Below is the relevant code. I stripped it down to the basics, with the navbar being where it should be (so the button does not currently work).

   <nav class="navbar navbar-expand-lg sticky-top navbar-default style="background-color: #ffffff;">

        <a class="navbar-brand" href="#"></a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
        </button></a>

        <ul class="navbar-nav">

              <li class="nav-item navbarimage"><img src="./images/htnew4.png" <a href="newsite.html"></li>

                <li class="nav-item heading homenavbar"></li>

              <li class="nav-item navbarimage icons"><video autoplay loop muted class="squiggles" source src="./images/squiggles4.mp4" type="video/mp4"></video></li>

                <li class="nav-item active">
                <a class="nav-link text-light" <a href="newsite.html"><i>Home</i><span class="sr-only">(current)</span></a>

                </li>

                <li class="nav-item navbarimage icons"><video autoplay loop muted class="squiggles" source src="./images/squiggles4.mp4" type="video/mp4"></video></li>


                  <li class="nav-item">
                      <a class="nav-link text-light" <a href="About.html"><i>About</i></a></li>

                        <li class="nav-item navbarimage icons"><video autoplay loop muted class="squiggles" source src="./images/squiggles4.mp4" type="video/mp4"></video></li>

                      <li class="nav-item">
                      <a class="nav-link text-light" <a href="skills.html"><i>Skills</i></a>
                     </li>

                       <li class="nav-item navbarimage icons"><video autoplay loop muted class="squiggles" source src="./images/squiggles4.mp4" type="video/mp4"></video></li>

                      <li class="nav-item">
                      <a class="nav-link text-light" href="#Logos"><i>Motion Design</i></a>
                      </li>

                        <li class="nav-item navbarimage icons"><video autoplay loop muted class="squiggles" source src="./images/squiggles4.mp4" type="video/mp4"></video></li>

                      <li class="nav-item">
                      <a class="nav-link text-light" href="#Contact"><i>Contact</a>
                </li>
            </ul> 
        </div>
    </nav>

<img id="myImg" src="./images/insurance.jpg" alt="Snow" 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>

<script>
// Get the modal
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";
}
</script>

Answer 1

You are missing data-dismiss="modal" in your close element. Add this and X will work just fine and close your modal.

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close" data-dismiss="modal">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

Update: It is better to use bootstrap.js along with bootstrap.css for bootstrap modals to work well. Bootstrap.js provides a lot of in-built features for modals such as hide and show, fade-in & fade-out, handlers for shown and hidden modals etc. without having to writing a single line of code. All you have to do is set the data- attributes of the html elements.

Complete HTML in fiddler --> Click here

Details below:

Step 1: Refer the bootstrap.js script in the html header

Step 2: Set the img element data-toggle and data-target attributes like below

<img id="myImg" src="./images/insurance.jpg" alt="Snow" style="width:100%;max-width:300px" data-toggle="modal" data-target="#myModal">

Step 3: Define a sophisticated modal element with header, body and footer like below

<!-- The Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 id="modalTitle" class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div id="modalBody" class="modal-body">
                    <img class="modal-content" id="img01" style="height:100%;width:100%">
                </div>
                <div class="modal-footer">
                    <div id="caption" class="pull-left"></div>
                </div>
            </div>
        </div>
    </div>

Step 4: The only javascript code you need to write is assigning src and caption attributes to the modal elements like below:

// Get the modal
 var modal = document.getElementById('myModal');
 var img = document.getElementById('myImg');
 var modalImg = document.getElementById("img01");
 var captionText = document.getElementById("caption");
 img.onclick = function () {         
     modalImg.src = this.src;
     captionText.innerHTML = this.alt;
}