JS Confirmation plugin

by Adrien Be

CSS

#window-confirm {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  display: none; /* confirmation window is not-displayed by default */
  position: fixed; /* fixed so that the confirmation window is always visible even if you scroll down */
  top: 40%;
  left: 50%;
  margin-left: -240px; /* half the width of the confirmation window */
  padding: 0 20px 20px 20px;
  width: 480px;
  z-index: 1000;
  background-color: #FFFFFF;
  border: 1px solid #999999;
  text-align: center;
}
#window-confirm > h3 {
  padding: 10px 3px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 20px;
}
#window-confirm > .msg-confirm {
  margin-bottom: 20px;
}
#window-confirm > .cancel-confirm,
#window-confirm > .valid-confirm {
  display: inline-block;
}
#window-confirm > .valid-confirm {
  margin-left: 20px;
}

JavaScript

(function ( $ ) {
	$.fn.customConfirm = function(options) {

		var defaults={
			'title': 'Confirmation',
			'message': 'Do you really want to do that?',
			'okTitle': 'OK',
			'cancelTitle': 'Cancel',
			'onconfirm': null,
			'oncancel': null,
		};
		var parameters=$.extend(defaults, options);

		var confirmationWindowHtml = '<div id="window-confirm">'
							  + '<h3 class="title-confirm">' + parameters.title + '</h3>'
							  + '<p class="msg-confirm">' + parameters.message + '</p>'
							  + '<button class="cancel-confirm">' + parameters.cancelTitle + '</button>'
							  + '<button class="valid-confirm">' + parameters.okTitle + '</button>'
							 + '</div>';
		
		$("body").append(confirmationWindowHtml);

		$('#window-confirm').fadeIn();

		$('#window-confirm').find(".cancel-confirm").on('click', function() {
			$('#window-confirm').fadeOut( function(){
				$('#window-confirm').remove();
				if( parameters.oncancel ){
					parameters.oncancel.call();
				}
			});
		});

		$('#window-confirm').find(".valid-confirm").on('click', function() {
			$('#window-confirm').fadeOut( function(){
				$('#window-confirm').remove();
				if( parameters.onconfirm ){
					parameters.onconfirm.call();
				}
			});
		});
	};
}( jQuery ));

$('html').customConfirm({
						'okTitle': 'Yes I am sure',
						'oncancel': function()
						{
						  alert('You canceled the action!');
                          /** do more things **/
						},
						'onconfirm': function()
						{
						  alert('You confirmed the action!');
                          /** do more things **/
						}
						});