Enable File Delete Confirmation Dialog Box With JS

Why turn on the delete confirmation box on your website?

Although some users might like this new feature as one can easily delete a file or folder quickly and easily, the new feature does stop users from accidentally deleting a file.

HTML

<button class="clickDelete">Delete Me</button>

<div class="deleteConfirmed" style="display:none;">
    <span class="close">×</span>
    <div class="delete-box">
        <span class="close-icon">×</span>
        <h5>Are you sure?</h5>
        <p>Do you really want to delete this file. <br>This file cannot be restore.</p>
    </div>
    <div class="btn-group">
        <button class="red delete-btn" onclick="deleteFunction()">Yes</button>
        <button class="green close">No</button>
    </div>
</div>
<div id="success">
 <strong>Success!</strong>
</div>

CSS

body{
   font-family: 'Roboto', sans-serif;
}
.deleteConfirmed {
   margin: 0 auto;
   width: 400px;
   background: #fff;
   border: 1px solid #ccc;
   text-align: center;
   position: fixed;
   top: 50%;
   transform: translate(-50%, -50%);
   left: 50%;
   box-shadow:0 0 10px rgba(0,0,0,0.4)
}
.delete-box {
   float: left;
   width: 100%;
   padding: 30px 30px 0px 30px;
   box-sizing: border-box;
   text-align: center;
}
.deleteConfirmed h5 {
   font-size: 30px;
   color: #747474;
   margin: 20px 0 10px;
   width: 100%;
   float: left;
}
.deleteConfirmed p {
   padding: 20px 0;
   font-size: 18px;
   line-height: 26px;
}
.btn-group button {
   background-color: #4CAF50;
   color: #fff;
   border: none;
   padding: 12px 24px;
   cursor: pointer;
   float: left;
   width: 50%;
   font-size: 18px;
   cursor: pointer;
}
   span.close-icon {
   border-radius: 100px;
   height: 70px;
   width: 70px;
   float: none;
   font-size: 50px;
   color: white;
   text-align: center;
   margin: 0 auto;
   display: inline-grid;
   background: #ef5350;
   line-height: 67px;
   }
span.close {
   float: left;
   position: absolute;
   right: 10px;
   top: 0px;
   font-weight: bold;
   font-size: 35px;
   padding: 2px 5px;
   cursor: pointer;
   color: #E0E0E0;
}
span.close:hover{
   color: #333;
}
button.red {
   background: #EA4335;
   border-color: #EA4335;
}
#success {
   visibility: hidden;
   min-width: 250px;
   color: #3c763d;
   background-color: #dff0d8;
   text-align: center;
   border-radius: 4px;
   padding: 16px;
   position: fixed;
   z-index: 1;
   right: 30px;
   top: 30px;
   font-size: 17px;
}
#success.showSucess {
   visibility: visible;
   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
button.clickDelete {
   background: #60C87B;
   padding: 10px 20px;
   color: #fff;
   border-color: #60C87B;
   border: 1px solid #60C87B;
   margin: 22% auto 0px;
   display: block;
   font-size: 20px;
   border-radius: 5px;
}

JavaScript

$('.clickDelete').click(function(){
   $('.deleteConfirmed').show();
});        

$('.close').click(function(){
   $('.deleteConfirmed').hide();
});

$('.delete-btn').click(function(){
   $('.alert-success').show();
});
    
function deleteFunction() {
   var x = document.getElementById("success");
   x.className = "showSucess";
   setTimeout(function(){x.className = x.className.replace("showSucess", ""); }, 4000);
   $('.deleteConfirmed').hide();
}