Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

JQuery Message Box Plugin

, 6 Oct 2011
Shows a simple implementation of JQuery UI based Message Box Dialog and Confirm Dialog
Article_demo.zip
code
css
ui-lightness
images
ui-bg_diagonals-thick_18_b81900_40x40.png
ui-bg_diagonals-thick_20_666666_40x40.png
ui-bg_flat_10_000000_40x100.png
ui-bg_glass_100_f6f6f6_1x400.png
ui-bg_glass_100_fdf5ce_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_gloss-wave_35_f6a828_500x100.png
ui-bg_highlight-soft_100_eeeeee_1x100.png
ui-bg_highlight-soft_75_ffe45c_1x100.png
ui-icons_222222_256x240.png
ui-icons_228ef1_256x240.png
ui-icons_ef8c08_256x240.png
ui-icons_ffd27a_256x240.png
ui-icons_ffffff_256x240.png
js
ConfirmDemo
ConfirmDemo
ConfirmDemo.suo
App_Data
bin
ConfirmDemo.dll
ConfirmDemo.pdb
ConfirmDemo.csproj.user
css
ui-lightness
images
ui-bg_diagonals-thick_18_b81900_40x40.png
ui-bg_diagonals-thick_20_666666_40x40.png
ui-bg_flat_10_000000_40x100.png
ui-bg_glass_100_f6f6f6_1x400.png
ui-bg_glass_100_fdf5ce_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_gloss-wave_35_f6a828_500x100.png
ui-bg_highlight-soft_100_eeeeee_1x100.png
ui-bg_highlight-soft_75_ffe45c_1x100.png
ui-icons_222222_256x240.png
ui-icons_228ef1_256x240.png
ui-icons_ef8c08_256x240.png
ui-icons_ffd27a_256x240.png
ui-icons_ffffff_256x240.png
js
Properties
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery Message Dialog Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.msgBox.v1.js"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#msgDemo").click(function(){
					$.msgBox("Hello World");
					return false;
				});
				
				$("#msgDemo1").click(function(){
					$.msgBox("Hello World Demo with Custom Title", null, { title: "My Title" });
					return false;
				});

				$("#confirmDemo").click(function(){
					$.msgBox.confirm("Are you sure?",function(){
						alert("OK Clicked");
					});
					return false;
				});

				$("#confirmDemo1").click(function(){
					$.msgBox.confirm("Are you sure?",function(){
						alert("OK Clicked");
					}, false);
					return false;
				});

				$("#confirmDemo2").confirmLink();

			});
		</script>
		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>	
	</head>
	<body>
	<h1>Welcome to jQuery UI Message Dialog!</h1>
	
	<h3>
		<a href="#" id="msgDemo">Click to display a Message dialog</a>
	</h3>

	<h3>
		<a href="#" id="msgDemo1">Click to display a Message dialog with custom Title</a>
	</h3>

	<h3>
		<a href="#" id="confirmDemo">Click to display a confirm dialog</a>
	</h3>

	<h3>
		<a href="#" id="confirmDemo1">Click to display a confirm dialog with Ok button</a>
	</h3>

	<h3>
		<a href="http://www.google.com" id="confirmDemo2" rel="Are you sure you want to visit google?">Click to display a confirm dialog (inline)</a>
	</h3>

	</body>
</html>


By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sazzad Hossain
Binary Quest
Australia Australia
Sazzad is working as a developer since 2001 in the Realestate Market in Melbourne. Likes to work in C# and .Net platform. Started an ISV Business in 2008 called Binary Quest.
 
Follow me on Linked In
Follow on   Twitter

| Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 6 Oct 2011
Article Copyright 2011 by Sazzad Hossain
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid