Question 15017 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to open a modal with Javascript when an image box is clicked and it closes when clicked outside the box? – Jquery

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

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

2

Answers


  1. 0

    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"
  class="modal"
  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.

    Login or Signup to reply.
  2. 0

    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 class="modal">

        <button class="button-close-modal">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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search