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:  How To Work With Laravel 6 Flash Messages?

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

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>

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

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