Confirm Dialog Box using jQuery and CSS

In this post we will show you hot to create Custom Alert and Confirm Box in JavaScript.

create Custom Alert and Confirm Box in JavaScript

By using css and js file we will create Custom Alert and Confirm Box. For this method we have to pass button name of alert box, title and message of alert box. we have to pass this detail in function Show_Custom_Dialog().

Read Also:  PHP Laravel Add Days Hours Minutes To Datetime

This is very easy methode for generate Custom Alert and Confirms Box in JavaScript.

CSS Code

.showcss{ display:block;}
.hidecss{ display:none;}


<div id="dialog" title="Alert message" style="display: none">
	<div class="message-div">
			<!-- show message of alert box -->
			<label id="lblMessage">

Also Read: Custom Alert and Confirm Dialog Box using jQuery and CSS
javascript Code



function Show_Custom_Dialog()
	Show_Dialog_Box('Title','This is my custom alert message !!!','Ok/Colse','', 'GoToAssetList',null);
function Show_Dialog_Box(title, content, btn_1_text, btn_2_text, functionText, parameterList) {
	var btn_1_css;
	var btn_2_css;

	if (btn_1_text == '') {
		btn_1_css = "hidecss";
	} else {
		btn_1_css = "showcss";

	if (btn_2_text == '') {
		btn_2_css = "hidecss";
	} else {
		btn_2_css = "showcss";

		resizable: false,
		title: title,
		height: 'auto',		
		width: '390px',
		modal: true,		
		bgiframe: false,
		hide: { effect: 'scale', duration: 400 },
		buttons: [
						text: btn_1_text,
						"class": btn_1_css,
						click: function () {

						text: btn_2_text,
						"class": btn_2_css,
						click: function () {