jEmbedConfirm: Dynamically Embedded Confirmation Dialog Plugin (jQuery)

Posted by Jay • December 23, 2011 • Printer-friendly

Are you sure!?

Most confirmation boxes nowadays are presented to the visitor in a modal fashion. This means that once the visitor performs the action which requires confirmation, the confirmation is presented, and the visitor must either accept or cancel in order to continue using the site. I was recently tasked with finding a different method that would allow the visitor to be presented with a confirmation box, but not be limited in continuing to use the site's functions while deciding (perhaps they want to check something before they decide).

My eventual solution to the challenge was to create a jQuery class which embeds a confirmation dialog box into a specified container. I call this plugin jEmbedConfirm.

jEmbedConfirm is available for your use on GitHub.

Here is a working jsFiddle.

jEmbedConfirm Options

promptText (string, default = 'Are you sure?'): The prompt text to be displayed in the confirmation dialog
confirmButtonText (string, default = 'Confirm'): The caption text to be displayed in the confirm (yes) button
cancelButtonText (string, default = 'Cancel'): The caption text to be displayed in the cancel (no) button
confirmButtonClick (function(), default = function(){}): A Function to be executed when the confirm (yes) button is clicked, before closing the dialog
cancelButtonClick (function(), default = function(){}): A Function to be executed when the cancel (no) button is clicked, before closing the dialog
dialogClass (string, default=''): The class name to be applied to the embedded confirmation dialog

Plugin Source Code

(function( $ ){
    $.fn.embedConfirm = function( options ) {  
        var settings = {
            'promptText' : 'Are you sure?',
            'confirmButtonText' : 'Confirm',
            'cancelButtonText' : 'Cancel',
            'confirmButtonClick' : function(){},
            'cancelButtonClick' : function(){},
            'dialogClass' : ''
        };
        return this.each(function() {        
            if ( options ) $.extend( settings, options );
            var item=$(this);
            var html = '<div id="consoleModalConfirm" class="hide addedConfirmDiv '+settings['dialogClass']+'">' + 
                       '<strong>'+settings['promptText']+'</strong>' + 
                       '<br /><br />' + 
                       '<div class="button yes" id="confYes">'+settings['confirmButtonText']+'</div>' +
                       '<div class="button no" id="confNo">'+settings['cancelButtonText']+'</div>' + 
                       '</div>';  
            item.find('.addedConfirmDiv').remove();
            item.prepend(html);
            item.find('#confYes').click(function(e){
                item.find('.addedConfirmDiv').slideUp('fast');
                settings['confirmButtonClick']();
            });
            item.find('#confNo').click(function(e){
                item.find('.addedConfirmDiv').slideUp('fast');
                settings['cancelButtonClick']();
            });    
            item.find('.addedConfirmDiv').slideDown('fast');
        });

    };
})( jQuery );

            view raw
            jEmbedConfirm.js
            This Gist brought to you by GitHub.
          

Sample CSS

/* Styles for the Plugin. These are not required, but suggested highly */

.confirmBox{ /* This is the main class name passed to embedConfirm() */
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    background:#333;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#000000));
    background-image: -moz-linear-gradient(#666666, #000000);
    background-image: -webkit-linear-gradient(#666666, #000000);
    background-image: -o-linear-gradient(#666666, #000000);
    border-radius: 5px;
    border:3px solid #000; 
    color:#fff;          
    margin:10px 0px;
    padding:10px;

}
.confirmBox .button{ /* This applies to all buttons */
    cursor:pointer;
    border:2px solid #fff; 
    border-radius: 5px; 
    display:inline-block;
    padding:6px;
    margin:8px;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;    
}
.confirmBox .button:hover{ /* This applies to all buttons */
    border-color:#ff0; 
    color:#ff0;
}
.confirmBox .no{ /* This applies to the cancel (no) button */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#990000), to(#330000));
    background-image: -moz-linear-gradient(#990000, #330000);
    background-image: -webkit-linear-gradient(#990000, #330000);
    background-image: -o-linear-gradient(#990000, #330000);  
    color:#fff; 
}
.confirmBox .yes{ /* This applies to the confirm (yes) button */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#009900), to(#003300));
    background-image: -moz-linear-gradient(#009900, #003300);
    background-image: -webkit-linear-gradient(#009900, #003300);
    background-image: -o-linear-gradient(#009900, #003300);  
    color:#fff; 
}

            view raw
            jEmbedConfirm.css
            This Gist brought to you by GitHub.
          