create Custom Alert and Confirm Box in JavaScript

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

Small JavaScript Alert & Confirm Dialog Replacement – Custom Alert
Small JavaScript Alert & Confirm Dialog Replacement – Custom Alert

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().

This is very easy methode for generate 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>

View DemoDownload

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  39  =  41

We accept paid advance and paid guest Posting on our Site : Contact US