Using Templates with Bootstrap Modal

HTML:

<button id="btnOpenPopUp">Open</button>

JavaScript:

function openModal(){

  var popUpHTML = "<div class='modal' id='test'>"+
"    <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'>Title</h4>"+
"            </div>"+
"            <div class='modal-body'>"+
"                        Nilav Patel.<br>"+
"                        nilavpatel1992@gmail.com"+
"            </div>"+
"            <div class='modal-footer'>"+
"                <a href='#' data-dismiss='modal' class='btn'>Close</a><a href='#' class='btn btn-primary'>Save changes</a>"+
"            </div>"+
"      </div>"+
"   </div>"+
"</div>";

  var popUp = $.parseHTML( popUpHTML );
  $(popUp).modal();
};

$(document).ready(function(){
     $("#btnOpenPopUp").click(function(){
openModal();
});
});