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

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>

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

在提琴手中完成HTML-> 单击此处

详情如下：

步骤1：在html标头中引用bootstrap.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和caption属性分配给模态元素，如下所示：

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