单击时模态不会关闭

Question

So I have a menu, where models pop-up on click. In each model, there's a close button, marked by an "x". Only problem is, that the model does not close, when the "x" is clicked.

I have tried multiple ways of filing this seemingly simple problem. But with no luck.
I have tried, using a z-index property, I have tried fiddling with the divs. I have tried to link to bootstrap external links. I have tried different kind of "close" button. I have tried to modifying the javascript code. Still I have not arrived at the desired outcome. Can anyone help ?

Here's my code

 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

It is very easy to use modal in Bootstrap. You just have to make sure that, as in the example below, jquery.js, popper.js and bootstrap.js are placed in order.

 <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

this is because you have a bad use of JS event delegation.

the corect way is tu use the matches method https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

like this :

 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>