0

Модальное окно закрывается при нажатии на него, как сделать чтобы оно закрывалось при нажатии вне окна, при условии что у меня сделана анимация закрытия через CSS? HTML

<button id="one" class="button">Phone</button>

<div id="modal-container">
      <div class="modal-background">
        <div class="modal">
          <h2>Phone</h2>
          <input type="name" name="nameUser" id="nameUser" placeholder="Name">
          <input type="number">
        </div>
      </div>
    </div>

js


$('.button').click(function(){
   var buttonId = $(this).attr('id');
   $('#modal-container').removeAttr('class').addClass(buttonId);
   $('body').addClass('modal-active');
 })

 $('#modal-container').click(function(){
   $(this).addClass('out');
   $('body').removeClass('modal-active');
 });

1 ответ 1

1

$('.button').click(function() {
  var buttonId = $(this).attr('id');
  $('modal').removeAttr('class').addClass(buttonId);
  $('#modal').addClass('modal-active');
});

$(document).mouseup(function(e) {
  var div = $('.modal-form');
  var modal = $('#modal');
  if (!div.is(e.target) && div.has(e.target).length === 0) {
    modal.removeClass('modal-active');
  }
});
.modal {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11111;
}

.modal-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-form {
  padding: 100px;
  width: 300px;
  height: 300px;
  background: red;
}

..modal-form {
  color: #ffffff;
}

.modal-active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" id="modal">
  <div class="modal-container">
    <div class="modal-form">
      <h2>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, hic accusantium! Enim asperiores illo dolore nesciunt voluptates, ipsam illum ratione quam, unde molestias deserunt ullam beatae! Delectus debitis quam dolore?</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat pariatur, inventore dolores maiores cum at voluptatum ad fuga doloribus dicta perspiciatis quas qui unde laborum, eos minus! Accusantium, esse similique.</p>
    </div>
  </div>
</div>
<button class="button">Открыть модальное окно</button>

Если я вас правильно понял,то вот так.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.