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

12 COMMENTS

    1. Amit Sonkhiya says:

      @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.

      Reply
    1. Amit Sonkhiya says:

      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

      Reply
      1. Udit Vishnoi says:

        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

        Reply

Leave a Reply