无法通过关闭按钮或通过单击外部模式框来关闭模式框

Question

I am very new to javascript and I am trying to use modal boxes for profile information. The website that I am building this on does happen to be a drag and drop interface. I have gotten it to open all of my modals but it wont always close all of my modals. Please note that the below code is contained within the html area of a drag and drop website. Thus far I have avoided using global java although I am open to that. I just don't want to screw it up. All advice welcome. Here is my code:

<style>
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px; 
  margin: auto; 
  text-align: center; 
  font-family: arial; 
  background-color: #ffffff;
  }
.title {
  color: grey;
  font-size: 18px;
  }
button { 
  border: none; 
  outline: 0; 
  display: inline-block; 
  padding: 8px; 
  color: white; 
  background-color: #333192; 
  text-align: center; 
  cursor: pointer; 
  width: 100%; 
  font-size: 18px; } 
a { 
  text-decoration: none; 
  font-size: 22px; 
  color: black; } 
button:hover, a:hover { 
  background-color: #1b1464; }
body {font-family: Arial, Helvetica, sans-serif;} 
/* The Modal (background) */ 
.modal { 
  display: none; 
/* Hidden by default */ 
  position: fixed; 
/* Stay in place */ 
  z-index: 1; 
/* Sit on top */ 
  padding-top: 12px; 
/* Location of the box */ 
  left: 0;
  top: 0; 
  width: 100%; 
/* Full width */ 
  height: 100%;
/* Full height */ 
  overflow: auto; 
/* Enable scroll if needed */ 
  background-color: rgb(0,0,0); 
/* Fallback color */ 
  background-color: rgba(0,0,0,0.4); 
/* Black w/ opacity */ } 

/* Modal Content */ 
.modal-content { 
  position: relative; 
  background-color: #FFFFFF; 
  margin: auto; 
  padding: 0px; 
  width: 80%; 
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
   -webkit-animation-name: animatetop;
   -webkit-animation-duration: 0.4s; 
  animation-name: animatetop;
  animation-duration: 0.4s } 

/* Add Animation */ 
@-webkit-keyframes animatetop { 
  from {top:-300px; opacity:0} to {top:0; opacity:1} } 
@keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } 
/* The Close Button */ 
.close { 
  color: white; 
  float: right; 
  font-size: 28px; 
  font-weight: bold; } 
.close:hover, .close:focus; cursor: pointer; { 
  color: #000; 
  text-decoration: none;} 
.modal-header { 
  padding: 12px; 
  background-color: #333192; 
  color: F15C22; } 
.modal-body {
  padding: 12px;} 
.modal-footer { 
  padding: 12px; 
  background-color: #F15C22; 
  color: white; } 
 .container { 
  position: relative; 
  width: 100%; } 
a:link { 
  color: #ffffff; } 
.image { 
  position: relative; 
  width: 100%; 
  height: auto; } 
.image:hover { opacity: .7; }
</style>

<div class="card">
  <a id="patricoloBtn"><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" class="image" style="width:100%"></a>

  <h2 class="contStyleHeaderSubtitle" style="font-weight: 300;"><font face="Helvetica">Francesca Patricolo</font></h2>

  <p class="title" style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">Transportation Planner</p>

  <p style="font-family: Arial, Helvetica, sans-serif;"><strong>Portland, Oregon</strong></p>

  <div style="font-family: Arial, Helvetica, sans-serif; font-weight: 300; margin: 24px 0px;">

    <a href="https://www.linkedin.com/in/francesca-patricolo-08855332/" target="_blank"><img src="/resources/Pictures/Site%20Icons/linkedin.png" class="card" alt="Linkedin" title="Linkedin" border="0" width="40" height="40" align="center"></a>
  </div>

  <p style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">        

Contact

<div class="container">
  <div id="patricoloModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">×</span>

     <h3 style="color:#F15C22">Francesca Patricolo</h3>
  </div>

  <div class="modal-body">
    <p><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" style="max-width: 210px; margin: 10px; border-radius: 50%;" align="left"><strong>What field do you work in?</strong></p>

    <p>Transportation Planning</p>

    <p><strong>What kinds of work do you do?</strong></p>

    <p>Long range planning, public policy, regional coordination</p>

    <p><strong>How many years have you been doing this work?</strong></p>

    <p>10</p>

    <p><strong>What's your favorite Core Value and why?</strong></p>

    <p>#7: Public participation communicates to participants how their input affected the decision. -A KEY trust-builder! It's not done until we communicate back.</p>

    <p><button><a href="mailto:francesca.patricolo@portlandoregon.gov" target="blank"><font color="#FFFFFF">Contact</font></a></button></p>
  </div>

  <div class="modal-footer"></div>
</div>

<script type="text/javascript">
/*** Get the modal***/ var patricoloModal = document.getElementById('patricoloModal'); 
/*** Get the button that opens the modal ***/ var patricoloBtn = document.getElementById("patricoloBtn"); 
 /*** Get the <span> element that closes the modal***/ var span = document.getElementsByClassName("close"); 
/*** When the user clicks the button, open the modal***/ 
patricoloBtn.onclick = function() {     patricoloModal.style.display = "block"; } 
/*** When the user clicks on <span> (x), close the modal ***/ span.onclick = function() {     modal.style.display = "none"; } 
/*** When the user clicks anywhere outside of the modal, close it***/ window.onclick = function(event) {     if (event.target == patricoloModal) {         patricoloModal.style.display = "none";     } } 
</script>

Answer 1

Remove Javascript for displaying the Modal, this is not the proper way.

Replace this

<a id="patricoloBtn"><img src="path" alt="Francesca" class="image" style="width:100%"></a>

with

<a data-toggle="modal" data-target="#patricoloModal"><img src="path" alt="Francesca" class="image" style="width:100%"></a>

Answer 2

For adding event listeners to multiple elements you must do the following:

var span = document.getElementsByClassName("close");
span.forEach(span => span.addEventListener("click", closeModal);

So heres the code:

        /*** Get the modal***/
        var patricoloModal = document.getElementById('patricoloModal'); 
        /*** Get the button that opens the modal ***/

        var patricoloBtn = document.getElementById("patricoloBtn"); 
         /*** Get the <span> element that closes the modal***/
        var span = document.getElementsByClassName("close"); 

        /*** When the user clicks the button, open the modal***/ 
        span.forEach(span => span.addEventListener("click", closeModal));

        /*** When the user clicks on <span> (x), close the modal ***/
        function closeModal() {
            particoloModal.style.display = "none";
        } 
        /*** When the user clicks anywhere outside of the modal, close it***/
        document.body.addEventListener("click", (event)=>{

            // IF THE CLICKED TARGET IS NOT EQUAL TO THE PARTICOLO MODEL
            if(event.target !== particoloModal) {
                particoloModal.style.display = "none";
            }
        })

Hope this works for you.