Что ж, недавно я заметил странную активность: у меня есть модальное окно Bootstrap 3, которое активируется через атрибуты данных. Вот мой HTML:
<li data-toggle="modal" data-target="#modalImage" class="quickview" data-img-src="<IMG SRC by Laravel Blade>">
<img src="<IMG SRC by Laravel Blade>" alt="<IMG ALT by Laravel Blade>">
</li>
и само модальное поле:
<!--modal-image-->
<div class="modal fade" id="modalImage" tabindex="-1" role="dialog" aria-labelledby="modalImage" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content" style="background-color:rgba(255,255,255,.8)!important">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-center">
<img class="modal_image" src="" />
</div>
</div>
</div>
</div>
А вот мой JavaScript (я использую его, потому что этот модал используется для открытия увеличенное изображение при щелчке, и изображения находятся внутри галереи изображений (bxSlider)):
/* Open Modal box for larger image; */
$(".quickview").on("click", function() {
var $this = $(this);
var imgSrc = $this.data("img-src");
$(".modal-body > img.modal_image").attr("src", imgSrc);
$('#modalImage').modal('show');
});
Проблема (и странность) в том, что он работает на всех протестированных мной браузерах, но Chrome. Он даже работает на IE и Edge (который основан на Chromium). В Chrome ничего не происходит, никаких сообщений об ошибках консоли, ничего.
Есть идеи?
PS И да - мой JS обернут $(document).ready
, поэтому он выполняется только при загрузке страницы