Your very own confirm boxes

In this example below you will see how to do a Your very own confirm boxes with some HTML / CSS and Javascript

As the title says, this is a way to build your own custom confirm boxes to use instead of those beauties that are standard to Javascript

Thumbnail
This awesome code was written by 2lach, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 2lach ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Your very own confirm boxes</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
  <title>Custom Confirm Box Programming</title>
  <link href="dialog.css" rel="stylesheet" />
  <script src="dialog.js"></script>
</head>

<body>
  <h2 style="color:lightgray">Customize your confirm box</h2>
  <div id="dialogoverlay"></div>
  <div id="dialogbox">
    <div>
      <div id="dialogboxhead"></div>
      <div id="dialogboxbody"></div>
      <div id="dialogboxfoot"></div>
    </div>
  </div>
  <p id="post_1">
    Isn't today a lovely day ...
    <!-- text		   operation	 delete elements id	--->
    <button class="btn" onclick="Confirm.render('Do you want to delete this post?','delete_post','post_1')">Delete</button>
  </p>
  <p id="post_2">
    Keep if you like pickles ...
    <button class="btn" onclick="Confirm.render('Delete Post?','delete_post','post_2')">Delete</button>
  </p>
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/2lach/your-very-own-confirm-boxes-zrxjmj */
body{
color:white;
  font-size:20px;
  text-align:center;
  background:url(https://3.bp.blogspot.com/-7D9qS96LGvc/VUEaCXjBaCI/AAAAAAAAQio/v_Z4P2L5LLQ/s1600/Liamara___Moving_Fractal_by_Shimaira.gif);
  background-size: cover;}

#dialogoverlay {
  display: none;
  opacity: 0.8;
  position: fixed;
  top: 0px;
  left: 0px;
  background: #FFF;
  width: 100%;
  z-index: 10;
}

#dialogbox {
  display: none;
  position: fixed;
  background: darkred;
  border-radius: 10px;
  width: 550px;
  z-index: 10;
}

#dialogbox > div {
  background: #FFF;
  margin: 8px;
}

#dialogbox > div > #dialogboxhead {
  background: purple;
  font-size: 19px;
  padding: 10px;
  color: white;
}

#dialogbox > div > #dialogboxbody {
  background: white;
  padding: 20px;
  font-family:'Bookman Old Style';
  color: purple;
}

#dialogbox > div > #dialogboxfoot {
  background: purple;
  padding: 10px;
  text-align: right;
}.btn {
  background-image: -webkit-linear-gradient(top, #a3020a, #242424);
  background-image: -moz-linear-gradient(top, #a3020a, #242424);
  background-image: -ms-linear-gradient(top, #a3020a, #242424);
  background-image: -o-linear-gradient(top, #a3020a, #242424);
  background-image: linear-gradient(to bottom, #a3020a, #242424);
  -webkit-border-radius: 16;
  -moz-border-radius: 16;
  border-radius: 16px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
}

.btn:hover {
  background: #f2f2f2;
  background-image: -webkit-linear-gradient(top, #f2f2f2, #808080);
  background-image: -moz-linear-gradient(top, #f2f2f2, #808080);
  background-image: -ms-linear-gradient(top, #f2f2f2, #808080);
  background-image: -o-linear-gradient(top, #f2f2f2, #808080);
  background-image: linear-gradient(to bottom, #f2f2f2, #808080);
  text-decoration: none;
  cursor:pointer;
  color:black;
}

/*Downloaded from https://www.codeseek.co/2lach/your-very-own-confirm-boxes-zrxjmj */
function deletePost(id) {
  var db_id = id.replace("post_", "");
  //run ajaxrequest here to delete post from database
  document.body.removeChild(document.getElementById(id));
}

function CustomConfirm() {
  this.render = function(dialog, op, id) {
    var winW = window.innerWidth;
    var winH = window.innerHeight
    var dialogoverlay = document.getElementById('dialogoverlay');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH + "px";
    var dialogbox = document.getElementById("dialogbox");
    dialogbox.style.left = (winW / 2) - (550 * .5) + "px";
    dialogbox.style.top = (winH / 20) + "px";
    dialogbox.style.display = "block";
    document.getElementById('dialogboxhead').innerHTML = "Confirm the action";
    document.getElementById('dialogboxbody').innerHTML = dialog;
            document.getElementById('dialogboxfoot').innerHTML = '<button class="btn" onclick="Confirm.yes(\'' + op + '\',\'' + id + '\')">Yes</button>  <button class="btn" onclick="Confirm.no()">No</button>';  }
  this.no = function() {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
  }
  this.yes = function(op, id) {
    if (op == 'delete_post') {
      deletePost(id);
    }
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
  }
}
var Confirm = new CustomConfirm();

Comments