You want to dynamically create modal popup in Twitter Bootstrap and fill it with title and content on the fly. Here in Bootstrap dynamic modal popup with dynamic data & content article, you can read how to achieve the same.
So you have already included required Bootstrap resources and necessary jQuery library in your project and are ready to implement same modal popup fired dynamically by different elements in your page with different title / data or content, let’s say we have many products listed on the page and we wish to ask for user confirmation in modal with name of the product as content before deletion of it.
Bootstrap dynamic modal popup
First of all we need to create a modal element once so copy the following HTML code into body of your page (preferably beneath opening body tag):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="modal fade" id="deleteProductModal" tabindex="-1" role="dialog" aria-labelledby="deleteProductModalLabel" aria-hidden="true"> <div class="modal-dialog"> <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="deleteProductModalLabel">Confirm Delete</h4> </div> <div class="modal-body"> Are you sure want to delete the product? </div> <div class="modal-footer"> <button type="button" class="btn btn-danger">Yes</button> <button type="button" class="btn btn-default" data-dismiss="modal">No</button> </div> </div> </div> </div> |
Next is to create list of product, each with a button to open the modal. I’m using a table for simplicity and hope your script create lists dynamically.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <table> <tr> <th>Thumbnail</th> <th>Product</th> <th>Delete</th> </tr> <tr> <td><img src="product-1-thumbnail" alt="Product 1" width="50" height="50" /></td> <td>Product 1</td> <td><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#deleteProductModal" data-productid="1" data-productname="Product 1">Delete</button></td> </tr> <tr> <td><img src="product-2-thumbnail" alt="Product 2" width="50" height="50" /></td> <td>Product 2</td> <td><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#deleteProductModal" data-productid="2" data-productname="Product 2">Delete</button></td> </tr> <tr> <td><img src="product-3-thumbnail" alt="Product 3" width="50" height="50" /></td> <td>Product 3</td> <td><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#deleteProductModal" data-productid="3" data-productname="Product 3">Delete</button></td> </tr> </table> |
Twitter Bootstrap’s fantastic ‘data-‘ API does wonderful jobs. Here each button has ‘data-target‘ attribute button set to the id of the modal we created earlier and we can create more ‘data-‘ attributes if we need more values as I created ‘data-productid‘.
Now it’s time to add some jQuery script before end of the body tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $(document).ready(function () { $('#deleteProductModal').on('show.bs.modal', function (event) { // id of the modal with event var button = $(event.relatedTarget) // Button that triggered the modal var productid = button.data('productid') // Extract info from data-* attributes var productname = button.data('productname') var title = 'Confirm Delete #' + productid var content = 'Are you sure want to delete ' + productname + '?' // Update the modal's content. var modal = $(this) modal.find('.modal-title').text(title) modal.find('.modal-body').text(content) // And if you wish to pass the productid to modal's 'Yes' button for further processing modal.find('button.btn-danger').val(productid) }) }) |
So you see in this Bootstrap dynamic modal popup example that the ‘data-‘ API helps to populate data & content dynamically.
var productid returns undefined
how do u update the db after the clicking the yes part?
@athan
That needs few steps:
1. Catch the button click
2. Receive the product Id from the modal
3. Send delete request using either AJAX or regular HTTP request
4. Perform validation and update the record.
However, this needs a full separate article to explain things and currently out of the scope to explain here. I would suggest you to learn updating database records with PHP or your favorite server side script.
Thanks !
just what I needed !
Thanks a ton. Was looking for something like this for ages.Finally problem solved.
How can we pass data atttribute using jquery ?
Hi,
If you are trying to change data attribute in HTML then use
elem.data(‘attr’, ‘value’);
Or if you were asking something else then let me know
Thanks for the early reply , actually , i want to do something else …
Now i want to do this in jquery via data attribute:
$(‘#newTask’).modal(‘show’).data({
mode:’2′,
backdrop:’static’,
task: taskDetail
});
Thanks
Missed a ‘$’ before the “(document).ready(function () {}” starts.
Ops! Corrected. Thanks
What version of bootstrap an jquery do yo use in this example?
Hi, it should work with Bootstrap version 3.3.x and I was using jQuery version 1.11.1