How to bind dynamic data in one bootstrap modal

Question

I have one modal in my form

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Image Tag Description</h4>
      </div>
      <div class="modal-body">
          <p id="desc">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
          <h2 id="cost">Cost : 20$</h2>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Edit</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

and i have multiple buttons which toggel modal. Html of button is following

<button class="btn btn-primary tag_cnt" data-trigger="hover" 
        data-target="#myModal" data-toggle="modal" type="button" 
        style="top:144px; left:510px" value="1"></button>

i have multiple buttons in my form. now i have to call same modal in every button click and i want to show dynamically data in modal. What is solution?

Answer 1

You can pass a dynamic variable to a function and then in the function you can use that variable to 'manually' open the modal:

<button class="btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data')" type="button" value="1"></button>

In your javascript you can access that like this:

function showModal(data)
{
   //you can do anything with data, or pass more data to this function. i set this data to modal header for example
   $("#myModal .modal-title").html(data)
   $("#myModal").modal();
}