<div class="modal fade" id="emojimodal" tabindex="-1" role="dialog" aria-labelledby="emojilabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" id="bgcolorheader">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="myModalLabel">Select emoji</h3>
</div>
<!-- to be dynamically populated from js -->
<div class="modal-body" id="modalDiv"> </div>
</div>
</div>
</div>I need to add images in rows and columns of a bootstrap grid in a modal. I need to do that dynamically using jquery. I started that with rows first and then I need to extend the same logic for each column as well. The following function displays the first image only. How can I have the image displayed in multiple rows?
function createGrid(rownum, imagearraySrc) {
for (var rowIndex = 0; rowIndex < rownum; rowIndex++) {
var rowid = "row" + rowIndex;
var $row = $("<div>", {
"class": "row",
"id": rowid
});
$('#modalDiv').append($row);
var imgid = "img" + rowIndex;
var $img = $("<img>", {
"id": imgid,
"src": imagearraySrc[rowIndex],
});
$($row[rowIndex]).append($img);
}
};The rownum value getting passed to the function is 2. imagearraySrc contains src of all the images. The goal is to have x rows and y columns and have images in each of them. All of this will get displayed in a modal and a user will chose one of them. The attached code is a starting point and is not helping me move forward. Can someone help with it?