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

  • Agustin Lorenzo Morales

    What version of bootstrap an jquery do yo use in this example?

    • Amit Sonkhiya

      Hi, it should work with Bootstrap version 3.3.x and I was using jQuery version 1.11.1

  • Alex

    Missed a ‘$’ before the “(document).ready(function () {}” starts.

    • Amit Sonkhiya

      Ops! Corrected. Thanks

  • Udit Vishnoi

    How can we pass data atttribute using jquery ?

    • Amit Sonkhiya

      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

      • Udit Vishnoi

        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

  • Ankush Sharma

    Thanks a ton. Was looking for something like this for ages.Finally problem solved.

  • nahuel mellusso

    Thanks !
    just what I needed !