Question

所以我有一个菜单，单击即可弹出模型。在每个模型中，都有一个关闭按钮，以“ x”标记。唯一的问题是，单击“ x”时，模型没有关闭。

我尝试了多种方法来解决这个看似简单的问题。但是没有运气
我试过使用z-index属性，尝试摆弄div。我试图链接到引导外部链接。我尝试过其他类型的“关闭”按钮。我试图修改javascript代码。我仍然没有达到理想的结果。有人可以帮忙吗？

这是我的代码

window.onload = function () {
  list = document.querySelectorAll(".Project");
  for (let i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function (e) {
        e.preventDefault();
        let currentElement = e.target.parentNode;
        let modalId = currentElement.dataset.modal;
        let modal = document.getElementById(modalId);
        modal.style.display = "block";
    });
  }
};

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

  <li class="Project" data-modal="myModal_1">

    <span id="myBtn_1"> Wer Baut Der Stadt </span>
    <span id="year"> 2019 </span>

    <div class="Describtion">
      <p style="display:none;">
        Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
      </p>
    </div>

    <div id="myModal_1" class="modal">
      <div class="modal-content">
        <img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="1000px">
        <span class="close">&times; </span>
        <p> Some text in the Modal..1 </p>
      </div>
    </div>
  </li>

Answer 1

在Bootstrap中使用模态非常容易。您只需要确保按照下面的示例顺序放置jquery.js，popper.js和bootstrap.js。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 2

这是因为您对JS事件委托的使用不正确。

最核心的方法是使用matchs方法https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

像这样：

window.onload = function () {

  list = document.querySelectorAll(".Project");

  document.querySelectorAll(".Project").forEach(LIelm=>{
    LIelm.addEventListener('click', showHideModal)
  })
};

function showHideModal(e) {

  if (!e.target.parentNode.matches('.Project , .modal-content' )) return
  e.preventDefault();

  let currentParent = e.target.parentNode;

  if (currentParent.matches('.Project') ){
    document.getElementById( currentParent.dataset.modal ).style.display = "block";
  }
  else {
    currentParent.parentNode.style.display = "";
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<li class="Project" data-modal="myModal_1">
  <span id="myBtn_1"> Wer Baut Der Stadt ee</span>
  <span id="year"> 2019 </span>

  <div class="Describtion">
    <p style="display:none;">
      Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
    </p>
  </div>

  <div id="myModal_1" class="modal">
    <div class="modal-content">
      <img src="https://picsum.photos/200/300"  >

      <span class="close">&times; </span>

      <p>Some text in the Modal..1
      </p>
    </div>
  </div>
</li>

单击时模态不关闭

2 个答案: