March 16, 2016

Pass Data to Bootstrap Modal

Pass Data to Bootstrap Modal : Some times we need to pass dynamic data to bootstrap modal. There are many ways to pass data in bootstrap modal. Here in this tutorial we are going to explain how you can pass dynamic data in bootstrap modal. We will explain each method with example and demo.

Pass Data to Bootstrap Modal

Here is an example to pass the data in bootstrap modal –

Html Part

Here is html part which contains the modal structure-

Pass Data to Bootstrap Modal JavaScript Example

  <!----modal starts here--->
<div id="modal" class="modal fade" role='dialog'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Tutorialsplane Modal Demo</h4>
            </div>
            <div class="modal-body" id= "modal-body">
                <p>Here the description starts here........</p>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
  </div>
<!--Modal ends here--->

<button type="button" class="btn btn-info btn-lg open-modal" >Click Here To Open Modal</button>

The above example contains the Modal and link to launch the modal.

Now let us create the JavaScript Part For this –

JavaScript Part

JavaScript Part Contains the following part –

Pass Data to Bootstrap Modal JavaScript Example & Demo

<script type="text/javascript">
   $(document).on("click", ".open-modal", function () {
	 var x = new Date(); 
     var myHeading = "<p>I Am Added Dynamically </p>";
     $("#modal-body").html(myHeading + x);     
     $('#modal').modal('show');
    });

</script>

Try it »

Here in this example we have passed data to bootstrap modal in myHeading variable which will be added in the content body element. $(“#modal-body”).html(myHeading + x); will add the data in modal body element which has id “modal-body”. Thus you can pass any data you want in the modal body. You can also use ajax to pull the data from server and pass into the bootstrap modal.

If you run the above example it will produce the output something like this –

Pass Data to Bootstrap Modal

Pass Data to Bootstrap Modal