0

Всем привет! Вопрос: настроил в 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');
    });
    
});




образец

4
  • А причем тут node.js? Было бы лучше пометить jquery 6 июл 2022 в 6:12
  • "modal.addClass('show');" - не работает так. Пишет, что не "modal.addClass is not a function" 6 июл 2022 в 6:27
  • $('.modal').addClass('show');? 6 июл 2022 в 6:31
  • Образец приложил. Там все работает, у меня - нет. 6 июл 2022 в 6:35

1 ответ 1

1

Вероятно класс не присваивается потому что в переменную modal записан не сам элемент, а его data-атрибуты.

        let modal = $(this);   
        $('body').addClass('no-scroll');
        $(modal).addClass('show');

https://api.jquery.com/data/

7
  • все равно не присваивается... 6 июл 2022 в 6:42
  • Ну или можно просто использовать как селектор класс. $('.modal').addClass('show');
    – Maxim
    6 июл 2022 в 6:43
  • ещё бы я добавил бы в css display: block!important; в .modal.show на всякий случай.
    – Maxim
    6 июл 2022 в 6:47
  • "$('.modal')" - нельзя так т.к. мы объявили его в переменной выше 6 июл 2022 в 7:09
  • Почему вы думаете что нельзя? Если вам обязательно нужна переменная modal, то можно прямо в неё присвоить весь div. можно сделать это в $('document').ready(), что бы div был записан в переменную по готовности документа. let modal = $('.modal'); И тогда у вас будет работать и addClass и removeClass
    – Maxim
    6 июл 2022 в 7:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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