我已经创建了一个与Javascript模态。现在当我点击图像模态打开，当我点击交叉按钮它关闭。我想要的是，而不是图片，当用户点击图像框，而不是具体的图像，模态应该打开，当用户点击模态框外的任何地方，它应该关闭，而不仅仅是交叉按钮。
HTML：

<section id="about-intro">
        <div class="container-fluid">
            <div class="row justify-content-center">
                     <div class="col-sm-12 col-lg-11 about-start">



                                <div class="about-content">
                                <div class="about-box">
                                <div class="upp-title">
                                 <div class="upp-headshot">
 <picture> <img src="image" 
  href="#myModal1" class="rounded-circle" alt="Responsive image"/> </picture>
                                        </div>
                                        <div class="upp-info">
                                            <h3><span class="about-name">abc</span> 
 </h3>
                                            <p><span class="about-des">xyz</span></p>
                                        </div>
                                    </div>
                                         <!-- The Modal -->
 <div id="myModal1" class="modal">
  <!-- Modal content -->
 <div class="modal-content">
 <div class="modal-header">
  <span class="close">×</span>
  
 </div>
 <div class="modal-body">
 <div class="row">
    <div class="col-md-12" style="text-align: center;">
      <img src="" class="img- 
  fluid" alt="Responsive image">
    </div>

    <div class="col-md-12" style="text-align: center;">
      <h1 class="modalh1">abc</h1>
      <h3 class="modalh3">xyz</h3>
      <p class="modalp">qwertyuicffvgbhnmghj</p>
    </div>
  </div>
 </div>
 <div class="modal-footer">
 
 </div>
 </div>
</div>                                
 </div>
</div>
 </div>
</div>
</div>
</section>

脚本：

<script>
  // Get the button that opens the modal
 var img = document.querySelectorAll("img.rounded-circle");

 // All page modals
 var modals = document.querySelectorAll('.modal');

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

 // When the user clicks the button, open the modal
 for (var i = 0; i < img.length; i++) {
 img[i].onclick = function(e) {
 e.preventDefault();
 modal = document.querySelector(e.target.getAttribute("href"));
 modal.style.display = "contents";
 }
 }

 // When the user clicks on <span> (x), close the modal
 for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
 for (var index in modals) {
  if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
  }
  }
  }

 // When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
 if (event.target.classList.contains('modal')) {
 for (var index in modals) {
  if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
 }
 }
 }
 </script>