@mvr1976
Учу html, css, js

Как добавить случайный вывод картинок в модальном окне Бутстрап?

Добрый день!
Используется готовое модальное окно из Бутстрап, но в него я хочу добавить случайный вывод одной из 10 картинок. Вот код:
<script>
var images = ["images/akuna.jpg","images/boris.jpg",
    "images/fedor.jpg","images/lion.jpg","images/maninBlack1.jpg",
    "images/masha.jpg","images/pechkin.jpg","images/prostoqua1.jpg",
    "images/simba.jpg","images/tachki1.jpg"];
var randImg = Math.floor(Math.random()*images.length);
var randImage = images[randImg];
$(function(){
$('.qwerty').click(){
$('modal-body').append('img src = "'+ randImage + '"');
       }
});
</script>

Вот разметка:
//триггер
<span class="qwerty" data-toggle="modal" data-target="#myModal">Открыть мод. окно!</span>
//место для вставки картинки(статическая картинка закомментирована)
<div class="modal-body">
      		<!-- <img src="images/boris.jpg" alt="#"> -->
</div>

И...! Не работает. То есть по отдельности модальное окно работает, console.log(randImage); показывает правильный путь к картинкам, а все вместе - нет.
Что не так?
  • Вопрос задан
  • 138 просмотров
Пригласить эксперта
Ответы на вопрос 2
@mvr1976 Автор вопроса
Учу html, css, js
Еще раз добрый день!
Спасибо, Сергей Сергей, вы меня натолкнули на верную мысль, я кое-что добавил и все заработало:
$(function(){
	$('.qwerty').click(function(){
		 setTimeout(function() {window.location.reload();}, 3000);
		$('.modal-body')
		.find('img')
		.removeAttr('src')//чтобы следующий метод работал, для него надо
сначала расчистить место
		.attr({
			src: randImage,
			title: "JQuery"
		});
		console.log(randImage);
	});
});
Ответ написан
Комментировать
@matios
Technical Team Lead
У модалки бустрапа есть свои события, лучше юзать их

$('#myModal').on('shown.bs.modal', function () {
     //и т.д.
})
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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