How to create html template as string with jquery? – Twitter bootstrap

var openHours;
var closedHours;

function agencyModal(modalName, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html = '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><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>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalName + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="Adınız ve Soyadınız" name="adsoyad"></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="E-posta Adresiniz" name="adsoyad"></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control tel-number" placeholder="Telefon Numaranız" name="telnumber"></div></div>';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">' + getOptions(openHours, closedHours, true) + '</select></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><button type="button" class="btn btn-success">Gönder</button></div></div></div>';
  html = html + '<div class="modal-footer"><button type="button" class="btn btn-popup-kapat" data-dismiss="modal">Kapat</button></div>';
  html = html + '</div></div></div>';
  // check length and append if it is not added before
  // !$(".agencyModal").length && $(document.body).append(html);

  //
  //  remove previous modal if it exists
  // 
  $('.agencyModal, .modal-backdrop').remove();
  $( 'body' ).removeClass('modal-open');
  
  //
  // add the new one
  //
  $(document.body).append(html);
  $('.agencyModal').modal();
}

$(document).on("click", ".open-agency", function() {
  openHours = $(this).data("open-hours");
  closedHours = $(this).data("closed-hours");
  agencyName = $(this).data("name");
  agencyModal(agencyName, "40%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Hemen Ara</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open, close, now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  var dt = new Date();
  var time = dt.getHours()
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
      if (time < h && now == true) {
          options += '<option>'+h+':00 - '+(h+1)+':00 Arası</option>'
      } else if (!now) {
          options += '<option>'+h+':00 - '+(h+1)+':00 Arası</option>'
      }
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  $('.hour-call option').remove();
  if ($('.call-today').is(':selected')) {
      $('.hour-call').prepend(getOptions(openHours, closedHours, true));
  } else {
      $('.hour-call').prepend(getOptions(openHours, closedHours, false))
  }
});

.open-agency {
    border: 3px solid #ccc;
    display: inline-block;
    padding: 12px;
    font-size: 14px;
    margin: 100px;
    cursor: pointer;
    box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
    background: #050505;
    color: #fff;
    border-color: #000;
}
.agencyModal .row{
    margin-bottom:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00" data-name="Podium Avm">See Agency</p>

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="07:00" data-closed-hours="20:00" data-name="Another Agency Name">See Agency 2</p>