Made an HTML+CSS+JS (JavaScript) confirm dialog today without using any external library. No jQuery!

HTML:

<a class="button button-success btn-show-confirm">Show confirm</a>
<div class="confirm dummy">
  <div class="contents">
    <div class="title">Confirm Message</div>
    <div class="message">Are you sure?</div>
    <div class="buttons">
      <a class="button button-success btn-yes">Yes</a>
      <a class="button button-danger btn-no">No</a>
      <a class="button btn-cancel">Cancel</a>
    </div>
  </div>
</div>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: #333;
}
.dummy {
  display: none;
}
.confirm {
  position: fixed;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.confirm .contents {
  display: block;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(234, 234, 234, 1);
  padding: 20px;
  border-radius: 5px;
  min-width: 350px;
}
.confirm .title {
  font-size: 1.2em;
  padding-bottom: 10px;
}
.confirm .message {
  padding-bottom: 20px;
}
.confirm .buttons {
  padding: 0px;
}
.buttons {
  padding: 10px;
}
.button {
  background-color: rgba(234, 234, 234, 0.5);
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.5s, color 0.4s;
  user-select: none;
  outline: none;
}
.button:hover {
  background-color: rgba(234, 234, 234, 1);
}
.button-success {
  background-color: rgba(48, 166, 74, 0.5);
  color: #333;
}
.button-success:hover {
  background-color: rgba(48, 166, 74, 1);
  color: #fff;
}
.button-danger {
  background-color: rgba(216, 58, 77, 0.5);
  color: #333;
}
.button-danger:hover {
  background-color: rgba(216, 58, 77, 1);
  color: #fff;
}
.btn-show-confirm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

JS:

var confirm = function(title, message, yes, no, cancel) {
  var confirm = {
    element: document.querySelector(".confirm").cloneNode(true),
    title: title,
    message: message,
    yes: yes,
    no: no,
    cancel: cancel,
    show: function() {
      confirm.element.className = confirm.element.className.split("dummy").join("");
      confirm.element.querySelector(".title").innerHTML = title;
      confirm.element.querySelector(".message").innerHTML = message;
      confirm.element.querySelector(".btn-yes").addEventListener("click", function() {
        if (typeof yes !== "undefined") yes();
        confirm.element.style.opacity = 0;
        confirm.element.style.pointerEvents = "none";
      });
      confirm.element.querySelector(".btn-no").addEventListener("click", function() {
        if (typeof no !== "undefined") no();
        confirm.element.style.opacity = 0;
        confirm.element.style.pointerEvents = "none";
      });
      confirm.element.querySelector(".btn-cancel").addEventListener("click", function() {
        if (typeof cancel !== "undefined") cancel();
        confirm.element.style.opacity = 0;
        confirm.element.style.pointerEvents = "none";
      });
      document.querySelector("body").appendChild(confirm.element);
      confirm.element.style.opacity = 1;
      confirm.element.style.pointerEvents = "auto";
    },
    hide: function() {
      confirm.element.style.opacity = 0;
      confirm.element.style.pointerEvents = "none";
    }
  };
  confirm.show();
  return confirm;
};
document.querySelector(".btn-show-confirm").addEventListener("click", function() {
  confirm("Title", "Are you sure?", function() {
    console.log("yes");
  }, function() {
    console.log("no");
  }, function() {
    console.log("cancel");
  });
});

CodePen Preview:

See the Pen
No library HTML+CSS+JS Confirm Dialog by Animated Creativity (@animatedcreativity)
on CodePen.

Hope it helps someone!