JavaScript Confirm Box With Custom Buttons

This code snippet helps you to create a confirm box with custom. It defines a ConfirmBox object with a constructor that takes an HTML element and some parameters. The object has methods for creating the HTML elements, displaying and hiding the ConfirmBox, and handling user actions. The show() and hide() methods set the display and opacity CSS properties of the element to show or hide it with a fade-in/out effect. The actions() method sets up event listeners for the ConfirmBox buttons and handles the callbacks provided in the constructor parameters. The code also initializes an instance of the ConfirmBox object with the document’s DOMContentLoaded event, passing a confirm button and output element as well as callbacks to handle the OK and cancel buttons. When the ConfirmBox is shown and the user clicks either the OK or cancel button, the corresponding callback function is executed and the output element is updated to reflect the user’s choice.

How to Create JavaScript Confirm Box With Custom Buttons

Create the HTML structure for the confirm box as follows:

<p class="trigger"><button type="button" id="confirm" data-question="Are you sure?" class="button">Confirm</button></p>
<div id="output"></div>

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

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic);

body {
	margin: 0;
	padding: 0;
	font: 100%/1 'Lato', Arial, sans-serif;
	color: #333;
	background: #fff;
}
.button {
	background-color:#f5f5f5;
	border:1px solid #dcdcdc;
	color:#666;
	cursor:pointer;
	display:inline-block;
	vertical-align:middle;
	font-size:13px;
	font-weight: bold;
	font-family: 'Lato', Arial, sans-serif;
	text-transform: uppercase;
	height:27px;
	line-height:27px;
	min-width:54px;
	padding:0 8px;
	text-align:center;
	text-decoration:none;
	border-radius:2px;
	background:linear-gradient(top,#f5f5f5,#f1f1f1);
}

.trigger, #output {
	padding: 1em;
	margin: 0;
}

/*= Confirm Box */

#confirm-wrapper {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000000;
	background: rgba( 204, 204, 204, 0.6 );
	display: none;
	transition: opacity 1s ease-in;
}

#confirm-box {
	width: 300px;
	background: #fff;
	min-height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -150px;
}

#confirm-buttons {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 0;
	left: 0;
	padding-bottom: 1em;
}

#confirm-buttons button {
	display: inline-block;
	background: transparent;
	color: #000;
	font-size: 1em;
	font-family: 'Lato', Arial, sans-serif;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	border: 2px solid;
	margin: 0 0.5em;
	padding: 0.6em 0;
	width: 120px;
}

#confirm-header {
	text-align: center;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	margin: 2.5em 0 1.5em 0;
}

#confirm-header:after {
	content: ' ';
	display: block;
	width: 1em;
	border-top: 1px solid;
	margin: 0.4em auto;
}

Finally, add the following JavaScript function for its functionality:

(function() {
	
	function ConfirmBox( element, params ) {
		this.element = element;
		this.params = params || {};
		this.params.ok = params.ok || function() {};
		this.params.cancel = params.cancel || function() {};
		
		this.init();
	}
	
	ConfirmBox.prototype = {
		init: function() {
			this.instance = null;
			this.create();
			this.layout();
			this.actions();
		},
		create: function() {
		  if( document.querySelector( "#confirm-wrapper" ) === null ) {
			var wrapper = document.createElement( "div" );
				wrapper.id = "confirm-wrapper";
			var html = "<div id='confirm-box'><h2 id='confirm-header'></h2>";
				html += "<div id='confirm-buttons'><button id='confirm-ok'>OK</button><button type='button' id='confirm-cancel'>Cancel</button></div>";
				html += "</div>";
				
				wrapper.innerHTML = html;
				document.body.appendChild( wrapper );
		  }
		  
		  this.instance = document.querySelector( "#confirm-wrapper" );
		},
		layout: function() {
			var wrapper = this.instance;
			var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			
			wrapper.style.height = winHeight + "px";	
		},
		show: function( element ) {
			element.style.display = "block";
			element.style.opacity = 1;
		},
		hide: function( element ) {
			element.style.opacity = 0;
			setTimeout(function() {
				element.style.display = "none";
			}, 1000);
		},
		actions: function() {
			var self = this;
			self.element.addEventListener( "click", function() {
				self.instance.querySelector( "#confirm-header" ).innerHTML = self.element.dataset.question;
				self.show( self.instance );
			}, false);
			
			self.instance.querySelector( "#confirm-ok" ).
			addEventListener( "click", function() {
				self.hide( self.instance );
				setTimeout(function() {
					self.params.ok();
				}, 1000);
			}, false);
			
			
			self.instance.querySelector( "#confirm-cancel" ).
			addEventListener( "click", function() {
				self.hide( self.instance );
				setTimeout(function() {
					self.params.cancel();
				}, 1000);
			}, false);
		}
	};
	
	document.addEventListener( "DOMContentLoaded", function() {
		var confirm = document.querySelector( "#confirm" );
		var output = document.querySelector( "#output" );
		var confBox = new ConfirmBox( confirm, {
			ok: function() {
				output.innerHTML = "OK";
			},
			cancel: function() {
				output.innerHTML = "Cancel";
			}
			
		});
	});
	
})();

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