Задать вопрос
@svm2001

Почему открывается два модальных окна?

Работаю с плагином ArcticModal.js

Мне нужно в модальном окне открывать два слайдера slick, связанные друг с другом (asNavFor). Я использую метод afterOpen и afterClose у arcticModal для того, чтобы инициализировать слайдер и обновлять его после открытия модального окна и после его закрытия соответственно. При загрузке страницы и вызове модального окна оно открывается и все работает, а когда я закрываю модальное окно и вызываю другое, то у меня открывается два модальных окна. Не пойму, что вызывает открытие 2х модальных окон

Без слайдера также открывает по 2 раза

Вот код:
const cardInit = document.querySelectorAll('.js-cardModalInit');
cardInit.forEach(item => {
    item.addEventListener('click', () => {

        let cardAttr = item.getAttribute('data-card');
        let modal = "FOS";

        $(function(){
            $('.card').arcticmodal({
                afterOpen: function() {
                    $('.slider__cardMain').not('.slick-initialized').slick({
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        arrows: false,
                        fade: false,
                        asNavFor: '.slider__cardAdd'
                    });
                    $('.slider__cardAdd').not('.slick-initialized').slick({
                        slidesToShow: 7,
                        slidesToScroll: 1,
                        asNavFor: '.slider__cardMain',
                        dots: true,
                        centerMode: true,
                        focusOnSelect: true
                    });
                },

                afterClose: function() {
                    $('.slider__cardAdd').slick('refresh');
                    $('.slider__cardMain').slick('refresh');
                }
            });

        if (cardAttr > 0) {
          modal = "card";
        }

        $.ajax({
            type: "POST",
            url: "blocks/cardModal.php",
            data: {
                id:cardAttr,
                typeForm: modal
            },
            success: function() {
                let modalContainer = document.querySelector('.modal__container');

                if (modalContainer.classList.contains('card')) {
                    modalContainer.classList.remove('card')
                }

                if (modalContainer.classList.contains('FOS')) {
                    modalContainer.classList.remove('FOS')
                }

                $('.modal__container').addClass(modal);
            }
        })
            .done(function( result )
        {
            $(".modal__container").html(result);
        });
    })
})})


Вот так отображаются окна, когда я вызываю модальное окно второй или более раз
63748a37f35f0148925382.png
  • Вопрос задан
  • 86 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы