Помогите с модульным окном, попап.

[Hukkizagi]

Народ, пишу сайт на подобие "Virink", что-то вроде соц.сети для художников. Столкнулся с такой проблемой: нужно при нажатии на картинку, выводить ее в большом размере в модульном окне, (пример - вк)
с блоком комментариев справа. Вся фишка в том, что картинки у меня выводятся через background для блока, поэтому нужно через функцию как-то вытаскивать ее, точнее путь на нее.
Ещё нужно предусмотреть то, что при клике на определенное изображение оно и выводится, их множество. В js чайник, уже второй день в статьях роюсь и все никак.

[Hukkizagi]

Ребят, ну неужели никто не знает как это реализовать???

[exec]

Так попробуйте:

var thumbs = document.getElementsByClassName("us_img__cnt");
for (var i = 0; i < thumbs.length; i++) {
  thumbs[i].onmousedown = function () {
    var src = this.style.backgroundImage.split('"')[1];
    alert( src );
  };
}

По клику на картинку выводит в алерте ссылку на неё?
Если да, то всё нормально. Подключайте любой скрипт для просмотра изображений, в сети их полно. В переменной src ссылка на картинку.

[Hukkizagi]

Нет, не ссылку. Смотрите, вот код html

<a href="#" class="link_opn_img">
												<div class="us_img__cnt" data-original="../img/cnt4.png" style="display: block; background-image: url('https://htmler.ru/wp-content/uploads/2015/06/Vsplyivayushhee-okno-na-JQuery-900x534.png');background-size: cover;"></div>
											</a>
											<div class="hovr__cont">
												<a href="#" class="wp__link_ps" style="display: block; height: 100%;">
													<div class="wrp__posit">
														<i class="fa fa-plus-square-o" aria-hidden="true"></i>
														<div class="mod__hvr__icon">
															<div class="wrp__detail">
																<i class="fa fa-heart" aria-hidden="true"></i>
																<i class="fa fa-comment" aria-hidden="true"></i>
																<i class="fa fa-share-square" aria-hidden="true"></i>
															</div>
														</div>
													</div>
												</a>

Вот мне нужно чтоб при нажатии на картинку, она открывалась во весь экран. Дело в том, как получить ее src из backgroud"а у блока? Т.е каждая картинка идёт как фон у блока, и мне нужно чтоб при нажатии на этот блок, вытаскивалось изображение из его фона. Как это сделать?

[exec]

А что выводит? Даже интересно стало.

[Hukkizagi]

exec,
Вставил код, при клике на блок у которой фоном зада картинка - ничего не происходит. Вот исходники:

<div class="col-md-3 col-xs-6 imp__fl">
<a href="#" class="link_opn_img">
<div class="us_img__cnt" data-original="../img/cnt4.png" style="display: block; background-image: url('../img/cnt12.png');background-size: cover;"></div>
</a>
<div class="hovr__cont">
<a href="#" class="wp__link_ps" style="display: block; height: 100%;">
<div class="wrp__posit">
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
<div class="mod__hvr__icon">
<div class="wrp__detail">
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-comment" aria-hidden="true"></i>
<i class="fa fa-share-square" aria-hidden="true"></i>
</div>
</div>
</div>
</a>	
</div>
</div>

$(".us_img__cnt").click(function () {
var thumbs = document.getElementsByClassName("us_img__cnt");
for (var i = 0; i < thumbs.length; i++) {
thumbs[i].onmousedown = function () {
var src = this.style.backgroundImage.split('"')[1];
alert( src );
};
}
});

[exec]

А зачем вы обернули код в .click() ?
Если используете jQuery, то можно написать компактнее:

$(".us_img__cnt").click(function () {
  var src = this.style.backgroundImage.split('"')[1];
  alert(src);
});

[Hukkizagi]

exec,
вставил данный код, все отработало. Но, выводит значение "undefined".
И, я вам полную версию скинул в личные сообщения, не могли б вы просмотреть?

[exec]

А если так?

$(".us_img__cnt").click(function () {
  var src = this.style.backgroundImage;
  alert(src);
});

что выводит?

[Hukkizagi]

exec,
так выводится но только пустое значение, смотрите. Есть блок, в нем ещё два блока.
1-й - это ссылка, а в ней блок с картинкой фоновой.
2-й блок - это ховер, который появляется при наведении на обёртку для этих двух блоков.
Вот мне нужно сделать так, чтоб при нажатии на второй блок под классом "hovr__cont" у меня функция брала src из блока "us_img__cnt"
в сообщения я вам кинул полный код, вот ссылка на ресурс где выложен данный код: https://jsfiddle.net/ns6xtxz7/7/