Bootstrap dynamic modal popup with dynamic data & content

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):

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.

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. 

So you see in this Bootstrap dynamic modal popup example that the ‘data-‘  API helps to populate data & content dynamically.

You Might Interested In