We Keep Coding

Get background-img url and use it to create a new <img> element

I have a couple of hyperlink that uses background-image. And want to pop out a modal window with a image of the same source as the background. But can't seem to get it to work.
My js code currently
$('a.portfolio-item').click(function(event){
event.preventDefault();
var content = $('.modal-body');
content.empty();
var img = $(this).css('background-image').replace(/^url\(|\)$/g, "");
content.html('<img src="'+ img +'">'); <---- need help here
$(".modal-profile").modal({show:true});
});
html
<a class="portfolio-item" style="background-image: url(img/portfolio-1.jpg);">
<div class="details">
<h4>Portfolio 1</h4>
<span>description here</span>
</div>
</a>
<!-- .modal-profile -->
<div class="modal fade modal-profile" tabindex="-1" role="dialog" aria-labelledby="modalProfile" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
<!-- //.modal-profile -->
Am i doing something wrong here?

You need to change as below remove " from src please find below snippet for your reference
content.html('<img src='+ img +'>');
$('a.portfolio-item').click(function(event){
debugger;
event.preventDefault();
var content = $('.modal-body');
content.empty();
var img = $(this).parent().css('background-image').replace(/^url\(|\)$/g, "");
content.html('<img src='+ img +'>');
$(".modal-profile").modal();
});
.block a{
display:block;
width:100%;
height:25px; // spared height: from the top;
overflow:hidden;
text-indent:-99999px;
left:0;
bottom:0; // or you can try with top:175px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="position:relative; background: url('https://dummyimage.com/200x200') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
<ul class="elem"></ul>
<span class="left_border"></span>
link
</div>
<!-- Modal -->
<div id="myModal" class="modal fade modal-profile" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
UPDATED
Portfolio Modal pop up JS
$('a.portfolio-item').click(function(event){
event.preventDefault();
var content = $('.modal-body-portfolio');
var title = $(".modal-title-portfolio");
content.empty();
title.empty();
//var title = $(this).attr("title");
//$('.modal-title').html(title);
var img = $(this).css('background-image').replace(/^url\(|\)$/g, "");
content.html('<img class="img-responsive" src='+ img +'>');
$(".modal-profile").modal({show:true});
});
Portfolio Modal pop up HTML
×
</div>
</div>
Service Modal pop up JS
$(".row .service-icon").click(function() {
var content = $(".carousel-inner");
var title = $(".modal-title-service");
content.empty();
title.empty();
var id = this.id;
var repo = $("#img-repo .item");
var repoCopy = repo.filter("#" + id).clone();
var active = repoCopy.first();
active.addClass("active");
title.html(active.find("img").attr("title"));
content.append(repoCopy);
// show the modal
$("#modal-gallery").modal("show");
});
Service Modal pop up HTML
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title modal-title-service"></h3>
</div>
<div class="modal-body modal-body-service">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Bootstrap Modal don't open in photo grid

I have a photo shuffle grid, with this grid I can select a few theme's and it shows only the pictures of that theme.
Now I want to do the following, when I click on a image I want a modal to open. The problem I have is the following:
The first image (with a modal in the back) opens without problems, but the other pictures (with modals) do not open probably, I see them (half) but I can't click on them.
This is my code:
HTML
<ul class="portfolio-sorting list-inline text-center">
<li>All</li>
<li>Heren</li>
<li>Dames</li>
<li>jongens</li>
<li>meisjes</li>
<li>gemengd</li>
</ul>
<!--end portfolio sorting -->
<ul class="portfolio-items list-unstyled" id="grid">
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren1" data-toggle="modal" data-target="#heren1"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 1</h2>
</button>
<div class="modal fade bs-example-modal-lg" id="heren1" role="dialog" style="display: none;">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title black_tekst">Heren 1</h4>
</div>
<div class="modal-body">
<!--Tekst -->
<h2 class="black_tekst">Test </h2>
<p class="black_tekst">
<br>
<br> Team informatie
<br>
<br>
</p>
<h3 class="black_tekst">Test</h3>
<!--Einde tekst -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------->
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren2" data-toggle="modal" data-target="#heren2"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 2</h2>
</button>
<div class="modal fade" id="heren2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------------->
<!-- sizer -->
<li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer"></li>
</ul>
<!--end portfolio grid -->
CSS and JS you can find on https://jsfiddle.net/hrpj3j9t/2/

1) Bad code provided on jsfiddle - unclear, modernizr in js code section
2)From my point of view the best way is to generate code you need with jquery. In imageSrc I mean the real path to image.
This the small example of concept:
Place modal at the top:
<body>
<div class="modal" id="modal">
<img id="modalImage" src = "" alt="image">
...
</div>
...
<div class="elementOfGrid" data-image="imageSrc">
</body>
in js:
$('elementOfGrid').click(function(){
$('#modal #modalImage').attr({"src":$(this).data("image")});
$('#modal').modal("show");
}
another variant instead of setting attribute you can generate the whole html and use it like this:
$('#modal').html('');
var htmlRow = '<div class="modalImage"><img src="imageSrc"></div>';
$('#modal').html(htmlRow);

Dynamically changing content of modal on list element click

I have a html page that is simulating the newsfeed of a social network website. here, posts from different users are generated as li on an un-ordered list. I want to show a pop up modal on the click even of any of these list elements that would dynamically show the content of that particular list element. the mark up is like below:
<body>
<div class="container" >
<ul id="newsfeed">
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">jhon</p>
<p class="text">good moprning every body</p>
<p>posted at 12:30pm</p>
<hr>
</li>
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">jimmy</p>
<p class="text">hello every body</p>
<p>posted at 12:30pm</p>
<hr>
</li>
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">joe</p>
<p class="text">felling bored at home</p>
<p>posted at 12:30pm</p>
<hr>
</li>
</ul>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="popup">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
The JQuery i have tried:
<script>
$('#myModal').on('show.bs.modal', function (event) {
var element = $(event.relatedTarget); // the li that triggered the modal to show
var dynamic_text = element.find('.text').val(); // Extract the value of the .text div inside that li
var modal = $(this);
$("#popup").html('the users post says: ' + dynamic_text);
});
</script>

.popup is the class, not the id. Need to Change
modal.find('.popup').text('the users post says: ' + dynamic_text);
to
$("#popup").html('the users post says: ' + dynamic_text);
and change val to text this:
var dynamic_text = element.find('.text').text();
fiddle http://jsfiddle.net/6oh9aacL/1/

Is my bootstrap modal window loading my image even if I don't open it?

I have a thumbnail gallery that displays thumbnail images and displays a modal window pop up when I click on the thumbnail. I'm not sure if this model window code is in the right place. My question is - is the modal ALWAYS loading the image when the page renders or just when I open the modal? Question 2 - should I have modal code for each thumbnail (like below) or should I place the modal code in one place and set the image with jquery? Please advise! Thanks.
Here is my html code that displays the thumbnail list
<div id="row">
<div id="sortable">
#foreach (var image in Model.Images)
{
#*<li>this is an image</li>*#
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
#{
var base64 = Convert.ToBase64String(image.ImageThumbnail);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}
<a href="" data-toggle="modal" data-target="#myModal">
<img src="#imgSrc" alt="image not found" width="203" height="136" />
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
#{
var base64Modal = Convert.ToBase64String(image.Image);
var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal);
}
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<a href="" data-toggle="modal" data-target="#myModal">
<img src="#imgSrcModal" alt="image not found" width="255" height="255" />
</a>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>

popup window not coming in bootstrap by using modal class

I make a responsive image gallery by using bootstrap framework, I define seperate modal class for each image, But after clicking on the image no popup window is coming, Only a dark screen is shown, I checked it in bootsrap documentation, And also in other browsers, but the same problem is coming , Here's is my code:
<html>
<head>
<title># SAURABH SINGH</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="span6">
<h2>Curiosity Club, JEC Jabalpur, TEAM MEMBERS</h2>
</div>
<div class="container">
<div class="row">
<div class="span6">
<ul class="thumbnail">
<li class="span2"><img src="img/atulsir.jpg" alt=""></li>
<li class="span2"><img src="img/ambarsir.jpg" alt=""></li>
<li class="span2"><img src="img/prabhakarsir1.jpg" alt=""></li>
<li class="span2"><img src="img/nishantsir.jpg" alt=""></li>
<li class="span2"><img src="img/saranshsir.jpg" alt=""></li>
<li class="span2"><img src="img/mayanksir.jpg" alt=""></li>
<li class="span2"><img src="img/abhisheksir.jpg" alt=""></li>
<li class="span2"><img src="img/gaanda.jpg" alt=""></li>
<li class="span2"><img src="img/saurabh.jpg" alt=""></li>
</ul>
</div>
</div>
<!-- close row -->
<div id="popup" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Atul Sinha</h3>
</div>
<div class="modal-body">
<p><img src="img/atulsir.jpg" alt="" class="pull-right"> 8th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<div id="popup1" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Ambar Khan</h3>
</div>
<div class="modal-body">
<p><img src="img/ambarsir.jpg" alt="" class="pull-right">8th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup2" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Prabhakar Mishra</h3>
</div>
<div class="modal-body">
<p><img src="img/prabhakarsir.jpg" alt="" class="pull-right">8th semester Electronics and communication student in Jabalpur engineering college.</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup3" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Nishant Gaurav</h3>
</div>
<div class="modal-body">
<p><img src="nishantsir.jpg" alt="" class="pull-right"> 6th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup4" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Saransh Jain</h3>
</div>
<div class="modal-body">
<p><img src="img/saranshsir.jpg" alt="" class="pull-right">6th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup5" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Mayank Kumar</h3>
</div>
<div class="modal-body">
<p><img src="img/mayanksir.jpg" alt="" class="pull-right">6th semester Computer Science student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup6" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Abhishek Maheshwari</h3>
</div>
<div class="modal-body">
<p><img src="img/abhisheksir.jpg" alt="" class="pull-right">6th semester Electronics and Communication student in Jabalpur engineering college.</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup7" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Vipul Sharma</h3>
</div>
<div class="modal-body">
<p><img src="img/gaanda.jpg" alt="" class="pull-right">4th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup8" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Saurabh Singh</h3>
</div>
<p><img src="img/saurabh.jpg" alt="" class="pull-right">4th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

It is always better to use one modal for all of your gallery images. Your modal isn't properly hidden until you either click outside the modal or trigger the escape key. I would also suggest you to use a single modal for your gallery.
Switch your modal-body content based on your requirements