How to enable file delete confirmation dialog box with js
Live Preview Compare Hosting

How to enable file delete confirmation dialog box with js

Why turn on the delete confirmation box in you 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.

Add HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How to enable file delete confirmation dialog box with js</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,700i&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
  <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>
</body>
</html>

Add CSS

<style type="text/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;
}
</style>

Add JS

<script type="text/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();
 
   }
</script>

Leave a Comment