Закрытие модального режима при нажатии окна вне контейнера - jQuery

Question

У меня есть следующий макет, с которым я тренируюсь, но не могу понять, на что нацеливаться:

HTML

<button id="opencontact" type="button" name="button">
  <i class="far fa-envelope fa-2x"></i>
</button>

<section id="contact-section">
  <div class="contact-container">
    <div class="contact-content">
      <h2>Contact Us</h2>
      <label for="">Email</label>
      <input type="text" name="" value="">
      <label for="">Name</label>
      <input type="text" name="" value="">
      <label for="">Message</label>
      <textarea name="name" rows="8" cols="80"></textarea>
      <button type="button" name="button">Submit</button>
    </div>
  </div>
</section>

CSS:

body {
  padding: 0;
  margin: 0;
  font-family: Helvetica;
  box-sizing: border-box;
}

#opencontact {
  bottom: 10px;
  right: 10px;
  position: fixed;
}

#contact-section {
  height: 60%;
  width: 40%;
  position: absolute;
  top: 20%;
  left: 30%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: red;
}

#contact-section.show {
  display: flex;
}

.contact-container {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.contact-content {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

И базовый c jQuery скрипт для открытия раздела контакта при клике:

<script type="text/javascript">

  $("#opencontact").click(function() {
    $("#contact-section").toggleClass("show");
  });

</script>

Какой скрипт я бы добавил к этому, чтобы закрыть модал при нажатии окно вне контактной секции? Все решения, которые я нашел в Интернете, не работают, поэтому любые советы были бы хорошими.

Answer 1

$(document).ready(function() {

  const modal = $('#contact-section');

  $("#opencontact").click(function() {
    modal.toggleClass("show");
  });

  $(document).click(function(event) {
    // Check if NOT click on modal or button
    if (!$(event.target).closest("#contact-section, #opencontact").length) {
      modal.removeClass("show")
    }
  });

});

body {
  padding: 0;
  margin: 0;
  font-family: Helvetica;
  box-sizing: border-box;
}

#opencontact {
  bottom: 10px;
  right: 10px;
  position: fixed;
}

#contact-section {
  height: 60%;
  width: 40%;
  position: absolute;
  top: 20%;
  left: 30%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: red;
}

#contact-section.show {
  display: flex;
}

.contact-container {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.contact-content {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>

<button id="opencontact" type="button" name="button">
  <i class="far fa-envelope fa-2x"></i>
</button>

<section id="contact-section">
  <div class="contact-container">
    <div class="contact-content">
      <h2>Contact Us</h2>
      <label for="">Email</label>
      <input type="text" name="" value="">
      <label for="">Name</label>
      <input type="text" name="" value="">
      <label for="">Message</label>
      <textarea name="name" rows="8" cols="80"></textarea>
      <button type="button" name="button">Submit</button>
    </div>
  </div>
</section>

Answer 2

Во-первых, вы должны прикрепить прослушиватель кликов для всего сайта. С каждым кликом вы спрашиваете, содержит ли ваш клик элемент, который вы хотите. Не беспокойтесь, это всегда будет делать оператор if для каждого клика, это на самом деле не является проблемой производительности, и это правильный способ, как справиться с этим.

Код будет выглядеть так (не нужно использовать jQuery). Вы можете проверить этот фрагмент .

const contactSection = document.querySelector('#contact-section');
let isContactSectionShowed = false;

window.addEventListener('click', function (e) {
  if (e.target === contactSection && !isContactSectionShowed) {
    contactSection.classList.add("show");
    isContactSectionShowed = true;
  } else if (e.target !== contactSection && isContactSectionShowed) {
    contactSection.classList.remove("show");
    isContactSectionShowed = false;
  }
});