modal with javascript

by Pranab Dey

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p class="pran"></p>

CSS

.contactButton button {
  background: #de5810;
  color: #fff;
  font-size: 17px !important;
  border-radius: 4px 4px 0 0 !important;
  position: fixed;
  bottom: 0;
  right: 10%;
  z-index: 50;
  line-height: 45px !important;
  box-sizing: border-box !important;
  padding: 2px 30px 0 !important;
}

.contactButton button:hover {
  background: #EB651D;
  color: #fff !important;
}

JavaScript

var main = document.createElement("div");
main.className = "contactButton";

var row = document.createElement("div");
row.className = "row";

var btnn = document.createElement("button");
btnn.innerHTML = "Contact";
btnn.setAttribute("class", "btn btn-large");
btnn.setAttribute("data-toggle", "modal");
btnn.setAttribute("data-target", "#contact");

var mod = document.createElement("div");
mod.className = "modal fade";
mod.id = "contact";
mod.innerHTML = "<div class=\"modal-dialog\" role=\"document\"><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\">Modal title</h4></div><div class=\"modal-body\">...</div><div class=\"modal-footer\"></div></div></div>";

btnn.addEventListener("click", function() {
  if (mod.classList.contains("in")) mod.classList.add("in");
  else mod.classList.remove("in")
});

row.append(btnn);
row.append(mod);
main.append(row);
document.querySelector(".pran").append(main);