Не работает 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);
})

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .