JavaScript Custom Confirm Box With Yes And No

This code snippet helps you to create custom confirm. It displays a confirmation message and a button to delete a user’s profile permanently from a website. When the “Delete My Profile!” button is clicked, the deleteProfile() function is executed, which displays a confirmation dialog. If the user confirms, the function redirects to the deleteProfile.php script using location.href.

How to Create JavaScript Custom Confirm Box With Yes And No

First of all, load the following assets into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Create the HTML for the custom confirm structure as follows:

<main>
  <h1>Delete Profile</h1>    
  <p>Click on the following button to delete your profile from our website permanently, this action can not be undone. (This is just an example, it won't really affect your Envato profile.)</p>
  <button 
    onclick="deleteProfile();">
    Delete My Profile!
  </button>
</main>
<script>
  //show a confirmation and redirect to the delete profile script
  function deleteProfile() {
    if (confirm("Do you really want to delete your profile?")) {
        location.href = '/deleteProfile.php';
    }
}
</script>

Now, style the custom confirm using the following CSS styles:

main {
  margin: 20px;
}

That’s all! hopefully, you have successfully created the JavaScript custom confirm box With Yes And No. If you have any questions or suggestions, feel free to comment below.