I have created a modals with Javascript. For now when I click the image the modal opens and when I click on cross button it closes. What I want is instead of picture when user clicks on image box not on specifically image, the modal should open and when user clicks outside modal box anywhere it should close not only with cross button.

Html:

<section id="about-intro">
        <div >
            <div >
                     <div >




                                <div >
                                <div >
                                <div >
                                 <div >
 <picture> <img src="image" 
  href="#myModal1"  alt="Responsive image"/> </picture>
                                        </div>
                                        <div >
                                            <h3><span >abc</span> 
 </h3>
                                            <p><span >xyz</span></p>
                                        </div>
                                    </div>
                                         <!-- The Modal -->
 <div id="myModal1" >
  <!-- Modal content -->
 <div >
 <div >
  <span >×</span>
  
 </div>
 <div >
 <div >
    <div  style="text-align: center;">
      <img src=""  alt="Responsive image">
    </div>

    <div  style="text-align: center;">
      <h1 >abc</h1>
      <h3 >xyz</h3>
      <p >qwertyuicffvgbhnmghj</p>
    </div>
  </div>
 </div>
 <div >
 
 </div>
 </div>
</div>                                
 </div>
</div>
 </div>
</div>
</div>
</section>

Script:

  <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>

CodePudding user response：

Hope it helps.

I always use flex display so i can click the external content.
I tried to insert it to your code

Change style of .modal

<div
  id="myModal1"
  
  style="
    display: none;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
  ">

then in js, instead of window.onclick

    for (var i = 0; i < modals.length; i  ) {
        modals[i].onclick = function (event) {
            if (!event.target.closest('.modal-content')) {
                for (var index in modals) {
                    if (typeof modals[index].style !== 'undefined')
                        modals[index].style.display = 'none';
                }
            }
        };
    }

You can change selector to .upp-title or .upp-headshot for a bigger clickable area.

CodePudding user response：

I Hope You Can Use this method to your code! Check this out

document.addEventListener(
  "click",
  function(event) {
    // If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal()
    if (
      event.target.matches(".button-close-modal") ||
      !event.target.closest(".modal")
    ) {
      closeModal()
    }
  },
  false
)

function closeModal() {
  document.querySelector(".modal").style.display = "none"
}

.modal {
    padding: 2rem;
    border: 1px solid #eee;
    width: max-content;
    position: fixed;
    right: 0;
    bottom: 0;
    max-width: 100%;
}

.button-close-modal {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    margin-left: auto;
}

<main>

    <div >

        <button >X</button>

        <h2>Modal close without Using button(X)</h2>

        <p>Sed ut perspiciatis unde voluptatem accusantium doloremque laudantium,</p>

        <label for="email">Enter your email:</label>
        <input type="email" id="email" name="email">
    </div>

</main>