Skip to content

Instantly share code, notes, and snippets.

@hellbunnie

hellbunnie/gist:ef459da9cd1e586d08e45745ae4dd3ce

Created August 3, 2018 12:45
Show Gist options
  • Save hellbunnie/ef459da9cd1e586d08e45745ae4dd3ce to your computer and use it in GitHub Desktop.
Save hellbunnie/ef459da9cd1e586d08e45745ae4dd3ce to your computer and use it in GitHub Desktop.
Download ZIP
populate a modal js
Raw
gistfile1.txt
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#product_modal').on('show.bs.modal', function(e) {
console.log("HELLO");
//get data-id attribute of the clicked element
var id = $(e.relatedTarget).data('id');
var brand = $(e.relatedTarget).data('brand');
var image = $(e.relatedTarget).data('img');
var imageElement = document.createElement("img");
imageElement.src=image;
var idElement = document.createElement("p").appendChild(document.createTextNode(id));
var brandElement = document.createElement("p").appendChild(document.createTextNode(brand));
var modal = document.getElementById("product_modal_body");
modal.appendChild(imageElement);
modal.appendChild(idElement);
modal.appendChild(brandElement);
});
});
</script>
</head>
<body>
<div id="main">
<div><a data-toggle="modal" data-id="1" data-img="img1.jpg" data-brand="some brand" href="#product_modal">Link 1</a></div>
<div><a data-toggle="modal" data-id="2" data-img="img2.jpg" data-brand="another brand" href="#product_modal">Link 2</a></div>
</div>
<div class="modal fade" id="product_modal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div id="product_modal_body" class="modal-body">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment