Не работает JS в модальном окне

@vintets · Регистрация: 28.04.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте.

Есть сайт, в нём работает карусель картинок и работают модальные окна (bootsrap 3 наверное). И понадобилось мне сделать новые страницы с модальным окном и каруселью внутри. Так вот JS не отрабатывает в модальном окне. В HTML добавляются теги карусели с параметрами, вот только параметры вычисляемых размеров (под картинки) равны 0. Я так понял из-за того что часть элементов скрыта в начале не срабатывает инициализация. От карусели остаются только часть рамок, если по одной из них кликнуть превьюшка и большое изображение появляются, но остальные превью нет, да и это не вариант.
Тот же код в обычном окне прекрасно работает.

Что мне нужно предоставить?
Открытие модального окна происходит так:

HTML5
1
<a href="#modal_05" data-toggle="modal">Пример работ 1</a>

HTML модального окна

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="modal_05" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Пример работ 1</h3>
                <div class="row flex">
                    <div class="col-xs-12 col-sm-8 col-lg-8">
                        <div class="product-l-box">
                            <div class="product-img-big">
                                <div class="product-img-big-item">
                                    <a href="mg_05_01_big.jpg" class="gallery" rel="gallery">
                                    <img src="mg_05_01_big.jpg"></a></div>
                                <div class="product-img-big-item">
                                    <a href="mg_05_02_big.jpg" class="gallery" rel="gallery">
                                    <img src="mg_05_02_big.jpg"></a></div>
                            </div>
                            <div class="product-img-preview">
                                <div class="product-img-preview-item"><span><img src="mg_05_01_big.jpg"></span></div>
                                <div class="product-img-preview-item"><span><img src="mg_05_02_big.jpg"></span></div>
                            </div>
                        </div>
                    </div>
 
                    <div class="col-xs-12 col-sm-4 col-lg-4">
                        <div class="caption"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS файлы большие в одну строку. Вот что нашёл в них относящееся к модальным окнам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var i = t.fn.modal;
t.fn.modal = e, t.fn.modal.Constructor = n, t.fn.modal.noConflict = function() {
    return t.fn.modal = i, this
}, t(document).on("click.bs.modal.data-api", '[data-toggle="modal"]', function(n) {
    var i = t(this),
        r = i.attr("href"),
        o = t(i.attr("data-target") || r && r.replace(/.*(?=#[^\s]+$)/, "")),
        s = o.data("bs.modal") ? "toggle" : t.extend({
            remote: !/#/.test(r) && r
        }, o.data(), i.data());
    i.is("a") && n.preventDefault(), o.one("show.bs.modal", function(t) {
        t.isDefaultPrevented() || o.one("hidden.bs.modal", function() {
            i.is(":visible") && i.trigger("focus")
        })
    }), e.call(o, s, this)
})

и созданию карусели

JavaScript
1
2
3
4
5
6
}, e.prototype.buildOut = function() {
    var e = this;
    e.$slides = e.$slider.children(e.options.slide + ":not(.slick-cloned)").addClass("slick-slide"), e.slideCount = e.$slides.length, e.$slides.each(function(e, n) {
        t(n).attr("data-slick-index", e).data("originalStyling", t(n).attr("style") || "")
    }), e.$slider.addClass("slick-slider"), e.$slideTrack = 0 === e.slideCount ? t('<div class="slick-track"/>').appendTo(e.$slider) : e.$slides.wrapAll('<div class="slick-track"/>').parent(), e.$list = e.$slideTrack.wrap('<div aria-live="polite" class="slick-list"/>').parent(), e.$slideTrack.css("opacity", 0), (e.options.centerMode === !0 || e.options.swipeToSlide === !0) && (e.options.slidesToScroll = 1), t("img[data-lazy]", e.$slider).not("[src]").addClass("slick-loading"), e.setupInfinite(), e.buildArrows(), e.buildDots(), e.updateDots(), e.setSlideClasses("number" == typeof e.currentSlide ? e.currentSlide : 0), e.options.draggable === !0 && e.$list.addClass("draggable")
}

Помогите, что куда прописать для восстановления работоспособности.
Хочу сразу предупредить, уровень моих знаний нулевой. Если будут предложения по решению вопроса, пожалуйста поподробней, как для тупого.

@СкриптыУбийцы · 23.01.2019, 23:07

с нулевыми знаниями говоришь и решил сайт с такими скриптами переделывать?

ну фиг знает. От себя могу лишь предложить прописать на страницу, с которой открывается мод.окно, вот это:

JavaScript
1
2
3
4
5
$('#YourModalName').on('show.bs.modal', function (e) {
 
$('#YourCarouselName').carousel();
 
});

P.S. хотя если картинки даже не прогружаются, то вряд ли поможет...

@vintets · 24.01.2019, 14:41 **[ТС]**

Сообщение от СкриптыУбийцы

JavaScript
1
$('#YourCarouselName').carousel();

Как бы найти имя моей карусели?

@СкриптыУбийцы · 24.01.2019, 16:44

я думал у тебя bootstrap-карусель, ее нет в коде окна, там может slick-карусель(фреймворк) в этом хитром скрипте

Добавлено через 7 минут
Может более грамотные подскажут. Обычно название карусели "#myCarousel" по умолчанию

Добавлено через 42 минуты
Если slick попробуй прописать:

JavaScript
1
2
3
4
5
$(document).ready(function(){
  $('.product-l-box').slick({
    setting-name: setting-value
  });
});

или обернуть все это в ту же функцию

JavaScript
1
2
3
4
5
6
7
8
9
$('#modal_05').on('show.bs.modal', function (e) {
 
 $(document).ready(function(){
  $('.product-l-box').slick({
    setting-name: setting-value
  });
});
 
});

но это все гадание какое-то получается))

@vintets · 01.02.2019, 12:38 **[ТС]**

Да, действительно это slick слайдер. Ну хоть нашёл куда копать.
Нашёл как переинициализировать слайдер. Как я и предполагал, проблема в скрытости части кода при инициализации, она происходит при загрузке страницы. Но, всё равно не получалось. Оказывается я неправильно задавал имя слайдера, на самом деле там два связанных слайдера большой+превьюшки. 'reinir' нужно было применять к обоим.
Ну и ещё проблема была, что отсутствовала задержка, окно появляется не мгновенно и 'reinit' уходил в никуда. Добавил и всё заработало.
Спасибо откликнувшимся за помощь.

JavaScript
1
2
3
4
5
6
$('.modal').on('show.bs.modal', function (e) {
    setTimeout(function() {
        $('.product-img-big').slick('reinit')
        $('.product-img-preview').slick('reinit')
    }, 200);
})

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .