create Custom Alert and Confirm Box in JavaScript

create Custom Alert and Confirm Box in JavaScript

In this post, we will show you how to create Custom Alert and Confirm Box in JavaScript.
By using CSS and js files we will create Custom Alert and Confirm Box. For this method, we have to pass the button name of the alert box, title, and message of the alert box. we have to pass this detail in function Show_Custom_Dialog().

This is a very easy method for generating Custom Alert and Confirm Box in JavaScript.

CSS

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

HTML

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

javascript

<script>

$(document).ready(function(){
	$('#btnTest').click(function(){
	Show_Custom_Dialog();
	});
});

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";
	}
	$("#lblMessage").html(content);

	$("#dialog").dialog({
		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 () {
																	
							$("#dialog").dialog('close');

						}
					},
					{
						text: btn_2_text,
						"class": btn_2_css,
						click: function () {
							$("#dialog").dialog('close');
						}
					}
				]
	});
} 
</script>