<!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();
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
