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

Also Read This πŸ‘‰   how to send multiple values using ajax in javascript?

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

Free Live Chat for Any Issue

CSS Code

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

HTML Code

<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>

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

<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>