Skip to content

Instantly share code, notes, and snippets.

@Jaybles
Created December 23, 2011 14:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jaybles/1514409 to your computer and use it in GitHub Desktop.
Save Jaybles/1514409 to your computer and use it in GitHub Desktop.
jQuery Plugin to Embed Confirmation Dialog into a given object
/* 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;
}
(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 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment