Custom Confirm Box in jQuery with Yes & Cancel

Yet another lightweight jQuery plugin to create a custom confirm box with “Yes” and “Cancel” options. It can be handled in any JavaScript event to show the popup dialog box. The confirmation dialog box helps you to perform a specific action if the user selects the “Yes” option.

Generally, it provides function parameters to define the dialog box title, message, text for yes/no, and action URL. The main feature of this dialog box is that you have full control over customization. You can design the dialog box using CSS according to your needs.

How to Create Custom Confirm Box

First of all, load the jQuery JS and confirm box CSS file into the head tag of your HTML document.

<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<!-- Confirm Box CSS -->
<link rel="stylesheet" href="css/confirm-box.css">

Basically, you can fire confirm box on any JavaScript event (like click, hover, input, scroll, etc). So, you can create any HTML element or attach confirm box to your existing elements. In the following example, we’ll create the HTML button element and attach a click event to fire the confirm box. Therefore, create a button tag with a unique id. We’ll use this id to select this button in the jQuery document ready function and call the confirm box function on click event.

<button id="visitExternalLink" class="button-default link">Go to Google</button>

If you want to attach the confirm box to your existing element then you can simply call the confirm() function (just like the JavaScript native alert() function) on any event.

Now, include the following confirm box function between the <script> tag before closing the body element. You can also write additional functions into it according to your needs.

function Confirm(title, msg, $true, $false, $link) { /*change*/
        var $content =  "<div class='dialog-overlay'>" +
                        "<div class='dialog'><header>" +
                         " <h3> " + title + " </h3> " +
                         "<i class='fa fa-close'></i>" +
                     "</header>" +
                     "<div class='dialog-msg'>" +
                         " <p> " + msg + " </p> " +
                     "</div>" +
                     "<footer>" +
                         "<div class='controls'>" +
                             " <button class='button button-danger doAction'>" + $true + "</button> " +
                             " <button class='button button-default cancelAction'>" + $false + "</button> " +
                         "</div>" +
                     "</footer>" +
                  "</div>" +
                "</div>";
         $('body').prepend($content);
      $('.doAction').click(function () {
        window.open($link, "_blank"); /*new*/
        $(this).parents('.dialog-ovelay').fadeOut(500, function () {
          $(this).remove();
        });
      });
$('.cancelAction, .fa-close').click(function () {
        $(this).parents('.dialog-ovelay').fadeOut(500, function () {
          $(this).remove();
        });
      });  
   }

Now it’s time to use the confirm function on the button click event. So, select the button element and attach the click event in the jQuery document ready function. Call the confirm() function and define parameters with values.

$(document).ready(function(){
        
   $('#visitExternalLink').click(function(){
         Confirm('Go to Google', 'Are you sure you want to visit Google', 'Yes', 'Cancel','https://www.google.com');  
   });
        
});

You can pass 5 parameters (title, msg, $true, $false, $link) for confirm box title, message, yes/cancel text, and action link respectively.

CSS Styles for Confirm Box

You can highly customize the confirm box using CSS. The “dialog-overlay" class is the main wrapper for the confirm box. It covers the whole page with 50% transparent overlay color. You can set the custom values for the background-color property change the overlay color.

.dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 999999
}

Similarly, you can set the custom size and background color for the confirm dialog box. The following CSS style the dialog box, and title. You can set custom values for dialog size, background color, and font-size, etc.

.dialog-overlay .dialog {
    width: 400px;
    margin: 100px auto 0;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    border-radius: 3px;
    overflow: hidden
}
.dialog-overlay .dialog header {
    padding: 10px 8px;
    background-color: #f6f7f9;
    border-bottom: 1px solid #e5e5e5
}
.dialog-overlay .dialog header h3 {
    font-size: 14px;
    margin: 0;
    color: #555;
    display: inline-block
}

The dialog box uses the Font Awesome CSS for the close button icon. If you don’t want to include this, you can simply use “&times;” (×) in button HTML to make a cross icon. Likewise, you can set custom colors, and font size according to your needs.

.dialog-overlay .dialog header .fa-close {
    float: right;
    color: #c4c5c7;
    cursor: pointer;
    transition: all .5s ease;
    padding: 0 2px;
    border-radius: 1px    
}
.dialog-overlay .dialog header .fa-close:hover {
    color: #b9b9b9
}
.dialog-overlay .dialog header .fa-close:active {
    box-shadow: 0 0 5px #673AB7;
    color: #a2a2a2
}

That’s all! I hope this tutorial was helpful to create a custom confirm box using CSS and jQuery. If you have any questions or suggestions, let me know by comment below.