I managed to find the solution that will allow you to do this using default confirm() with minimum of changes if you have a lot of confirm() actions through out you code. This example uses jQuery and Bootstrap but the same thing can be accomplished using other libraries as well. You can just copy paste this and it should work right away
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Custom Confirm</h1>
<button id="action"> Action </button>
<button class='another-one'> Another </button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
document.body.innerHTML += `<div class="modal fade" style="top:20vh" id="customDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id='dialog-cancel' class="btn btn-secondary">Cancel</button>
<button type="button" id='dialog-ok' class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>`;
function showModal(text) {
$('#customDialog .modal-body').html(text);
$('#customDialog').modal('show');
}
function startInterval(element) {
interval = setInterval(function(){
if ( window.isConfirmed != null ) {
window.confirm = function() {
return window.isConfirmed;
}
elConfrimInit.trigger('click');
clearInterval(interval);
window.isConfirmed = null;
window.confirm = function(text) {
showModal(text);
startInterval();
}
}
}, 500);
}
window.isConfirmed = null;
window.confirm = function(text,elem = null) {
elConfrimInit = elem;
showModal(text);
startInterval();
}
$(document).on('click','#dialog-ok', function(){
isConfirmed = true;
$('#customDialog').modal('hide');
});
$(document).on('click','#dialog-cancel', function(){
isConfirmed = false;
$('#customDialog').modal('hide');
});
$('#action').on('click', function(e) {
if ( confirm('Are you sure?',$(this)) ) {
alert('confrmed');
}
else {
alert('not confimed');
}
});
$('.another-one').on('click', function(e) {
if ( confirm('Are really, really, really sure ? you sure?',$(this)) ) {
alert('confirmed');
}
else {
alert('not confimed');
}
});
</script>
</body>
</html>
This is the whole example. After you implement it you will be able to use it like this:
if ( confirm('Are you sure?',$(this)) )