Всем привет! Вопрос: настроил в JS присваивание классов "show" и "no-scroll" в HTML. Только вот "no-scroll" работает, а "show" - нет. Не могу разобраться почему.
<div class="modal" id="becomeClientModal">
<div class="modal__inner">
<div class="modal__content">
<div class="modal__header">
<h4 class="modal__title">Need to deliver your cargo?
We can help!</h4>
<div class="modal__text">
<p>Fill a little form and we will call you back!</p>
</div>
</div>
<form class="form" action="/" method="post">
<div class="form__group">
<input class="input input--dark input--user" type="text" placeholder="Your name">
</div>
<div class="form__group">
<input class="input input--dark input--phone" type="tel" placeholder="Your phone">
</div>
<div class="form__group">
<input class="input input--dark input--email" type="email" placeholder="Your email">
</div>
<button class="btn btn--block btn--orange" type="submit">
<span>Call me back</span>
</button>
</form>
<div class="modal__footer">
<h4 class="modal__footer-title">Our contacts</h4>
<address class="modal__contacts">
<p>New York, Street, ZIP code</p>
<p>Phone: <a href="tel:+9948373123">+9948373123</a></p>
<p>E-mail: <a href="mailto:hello@centerlogistic.com">hello@centerlogistic.com</a></p>
</address>
</div>
<button class="modal__close" type="button" data-modal-close>
<img src="assets/images/close.svg" alt="Close">
</button>
</div><!-- /.modal__content -->
</div><!-- /.modal__inner -->
</div><!-- /.modal -->
body {
margin: 0;
background-color: #fff;
font-family: 'PT Sans', sans-serif;
font-size: 16px;
line-height: 1.4;
color: #585858;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.no-scroll {
overflow: hidden;
}
.modal {
display: none;
width: 100%;
height: 100%;
padding: 30px 15px;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0;
left: 0;
z-index: 2000;
}
.modal.show {
display: block;
}
$('[data-modal]').on('click', function(event) {
event.preventDefault();
let modal = $(this).data('modal');
$('body').addClass('no-scroll');
$(modal).addClass('show');
});
$('[data-modal-close]').on('click', function(event) {
event.preventDefault();
let modal =$(this).parents('.modal');
$('body').removeClass('no-scroll');
modal.removeClass('show');
});
});
$('.modal').addClass('show');
?