Не срабатывает модалка

$(function(){
  function showModal(id){
    $(document.body).addClass('is-open-modal');
    $(id).addClass('modal-active');
    console.log(id);
  }
  function hideModals(){
    $(document.body).removeClass('is-open-modal');
    $('.modal').removeClass('modal-active');
  }
  $('#button').on('click', function(e){
    console.log(e);
    showModal('#modal');
  });
  $(document).on('click', function(e){
    if (!(
    ($(e.target).parents('.modal-block').length)
    ||    ($(e.target).hasClass('modal-block'))
    ||    ($(e.target).hasClass('modal-open')))
    ) {
      hideModals();
    }
  });
});

.modal
  /* Основное модальное окно */
  display: none
  position: fixed
  top: 0
  left: 0
  z-index: 99
  width: 100%
  height: 100%
  background-color: rgba(#000, 0.5)
  &-active
    display: flex !important
  &-block
    position: fixed
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    width: 407px
    z-index: 100
    background-color: #fff
    border: 1px solid #555

<!-- Вход в modal справа -->
  <aside class="modal-right modal-open" id="button">
    <div class="modal-right__window"><a>Консультация бесплатно</a></div>
  </aside>
  <!-- модальное окно -->
  <div class="modal" id="modal">
    <div class="modal-block">
      <button class="modal-block__close" id="close"></button>
      <!-- /.modal-block__close -->
      <div class="modal-block__list">
        <div class="modal-block__title">
          <h1>Консультация бесплатно</h1>
          <h3>Оставьте, пожалуйста, ваши координаты и мы с Вами свяжемся.</h3>
        </div>
        <form action method="POST" id="form">
          <input type="text" name="name" id="name" placeholder="Введите Имя">
          <input type="text" name="phone" id="phone" placeholder="Телефон">
          <input type="text" name="email" id="email" placeholder="Email">
          <input type="text" name="theme" id="theme" placeholder="Вид работы">
          <input type="text" name="place" id="place" placeholder="Место расположения объекта">
          <input type="text" name="area" id="area" placeholder="Площадь помещения">
          <textarea name="wishes" id="wishes" placeholder="Ваши пожелания"></textarea>
          <button id="submit" type="submit">Отправить</button>
        </form>
        <!-- /.modal-block__title -->
      </div>
      <!-- /.modal-block__list -->
    </div>
    <!-- /.modal-block -->
  </div>
  <!-- /.modal -->

Открываю инспектор, там видно что что-то происходит, мне кажется класс добавляет и сразу же удаляется, не понимаю в чем проблема...