<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#confirmBox {
position: fixed;
top: -100px;
width: 200px;
margin-left: -100px;
left: 50%;
overflow: hidden;
background-color: white;
transition: top 0.5s;
border-radius: 10px;
padding: 10px;
text-align: center;
box-sizing: border-box;
border: 2px solid black;
}
#confirmBox.open {
top: 0px;
}
</style>
</head>
<body>
<div id="confirmBox">
<div class="message"></div>
<button class="confirm">OK</button>
<button class="cancel">abbrechen</button>
</div>
<button data-id="0" class="delete">delete 0</button>
<button data-id="1" class="delete">delete 1</button>
<script type="text/javascript">
var customConfirm = (function(){
var callbacks = {};
function confirm(){
if (callbacks.confirm){
callbacks.confirm.call(undefined);
}
finish();
}
function cancel(){
if (callbacks.cancel){
callbacks.cancel.call(undefined);
}
finish();
}
function finish(){
inConfirm = false;
callbacks = {};
if (queue.length){
var call = queue.shift();
customConfirm(call.message, call.confirmCallback, call.cancelCallback);
}
else {
box.className = "";
}
}
var queue = [];
var inConfirm = false;
var box = document.getElementById("confirmBox");
box.getElementsByClassName("confirm")[0].addEventListener("click", confirm);
box.getElementsByClassName("cancel")[0].addEventListener("click", cancel);
var messageBox = box.getElementsByClassName("message")[0];
return function customConfirm(message, confirmCallback, cancelCallback){
if (inConfirm){
queue.push({message: message, confirmCallback: confirmCallback, cancelCallback: cancelCallback});
}
else {
callbacks.confirm = confirmCallback;
callbacks.cancel = cancelCallback;
inConfirm = true;
messageBox.innerHTML = "";
messageBox.appendChild(document.createTextNode(message));
box.className = "open";
}
};
}());
[].forEach.call(document.getElementsByClassName("delete"), function(button){
button.addEventListener("click", function(){
customConfirm("delete " + this.dataset.id, function(){
button.parentNode.removeChild(button);
});
});
});
</script>
</body>
</html>
