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

Question

我为图像模态复制了一些代码，以及一个脚本，该脚本允许在单击时放大图像，并在单击X按钮时消失。

但是，单击 X 按钮时不执行任何操作。我认为这与导航栏有关，因为如果我删除它，X 按钮就会起作用。除了删除（或移动）我的导航栏之外，还有其他解决方案吗？以下是相关代码。我将其简化为基础知识，导航栏位于应有的位置（因此该按钮当前不起作用）。

   <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

您的 close 元素中缺少data-dismiss="modal"。添加这个，X 将正常工作并关闭您的模态。

<!-- 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>

更新：最好使用引导.js以及引导.css以使引导模式正常工作。Bootstrap.js为模态提供了许多内置功能，例如隐藏和显示，淡入和淡出，显示和隐藏模态的处理程序等，而无需编写任何代码。您所要做的就是设置 html 元素的data-属性。

在小提琴手中完成HTML --> 点击这里

详情如下：

第 1 步：在 html 标头中引用引导.js脚本

第 2 步：将 img 元素data-toggle设置并data-target属性，如下所示

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

步骤 3：使用页眉、正文和页脚定义复杂的模态元素，如下所示

<!-- 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>

第 4 步：您需要编写的唯一 javascript 代码是将 src 和标题属性分配给模态元素，如下所示：

// 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;
}