How to reuse modal html from bootstrap? -

i have handful of different modal dialogs contain different content. basically, click button1 displays modaldialog1...click button2 displays modaldialog2, etc, etc.

how can reuse html code within javascript or other reusable container , pass in data 1 reusable modal?

essential code button1 click , supporting code modaldialog1:

button code (for click display modal)

<a href="#mymodal" role="button" class="btn" data-toggle="modal">launch demo modal</a> 

html displaying modal...how can reuse code within javascript function or other way , pass in variables modal header , classidthatcontainsthecontentsformodal modal can reusable?

not sure if go javascript or other methodology.

<div id="mymodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">   <div class="modal-header">     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>     <h3 id="mymodallabel">modal header</h3>   </div>   <div class="modal-body">     <div id="container" class="classidthatcontainsthecontentsformodal">   </div>   <div class="modal-footer">     <button class="btn" data-dismiss="modal" aria-hidden="true">close</button>     <button class="btn btn-primary">save changes</button>   </div> </div>  

try this

<a class="btn" onclick="showmodal('my header 1','my_class_id_1')">launch demo modal 1</a> <a class="btn" onclick="showmodal('my header 2','my_class_id_2')">launch demo modal 2</a> <div id="mymodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"     aria-hidden="true">     <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">             ×</button>         <h3 id="mymodallabel">             modal header</h3>     </div>     <div class="modal-body">         <div id="container" class="classidthatcontainsthecontentsformodal">         </div>     </div>     <div class="modal-footer">         <button class="btn" data-dismiss="modal" aria-hidden="true">             close</button>         <button class="btn btn-primary">             save changes</button>     </div> </div> <script type="text/javascript">     function showmodal(header, contentclassid) {         $('#mymodallabel').html(header);         $('#container').removeattr('class'); //if alredy exists remove         $('#container').addclass(contentclassid);         $('#mymodal').modal('show');     } </script>