DAlert

Version 1.1.1

DAlert is a simple jQuery and jQuery UI plugin that easily create a customizable alert (or confirm) window as a replacement for the native javascript alert and confirm methods.

DAlert Simple Usage

1. Make sure to include the latest version of jQuery library and jQuery UI from CDN on your web page.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

2. Include jQuery dalert plugin after jQuery and jQuery UI.

<script type="text/javascript" src="js/dalert.jquery.js"></script>

3. Create a simple alert window.

<input type="button" class="button" id="dalert_button" value="DAlert" />

						//Start :: jQuery Click Event :: or as you wish to handle the click event
							$("#dalert_button").click(function(){
								//Start :: DAlert Alert Usage		
								dalert.alert("Hello, I am a DAlert!");
								//End :: DAlert Alert Usage
							});
						//End :: jQuery Click Event :: or as you wish to handle the click event

4. Create a simple alert with a callback.

<input type="button" class="button" id="dalert_button" value="DAlert" />

						//Start :: jQuery Click Event :: or as you wish to handle the click event
							$("#dalert_button").click(function(){
								//Start :: DAlert Alert Usage with a callback on close of the alert		
								dalert.alert("Hello, I am a DAlert!","Title",function callbackMe(){
									dalert.alert("Me callback !");
								});
								//End :: DAlert Alert Callback Usage
							});
						//End :: jQuery Click Event :: or as you wish to handle the click event

5. Create a confirm dialog box.

<input type="button" class="button" id="confirm_button" value="DAlert-Confirm"/>

DAlert-Confirm Simple Usage

DAlert Confirm is easy to use as it just returns a callback with the result user clicked, you can implement your logic for the specific button click as in the below example

Example:

						//Start :: jQuery Click Event :: or as you wish to handle the click event
							$("#confirm_button").click(function(){
								//Start :: DAlert Confirm Usage		
								dalert.confirm("Are You Sure?","DAlert Confirm !",function(result){
									if(result){
									dalert.alert("You've just clicked YES !");
									}
									else{
									dalert.alert("You've just clicked NO !");
									}
								});
								//End :: DAlert Confirm Usage
							});
						//End :: jQuery Click Event :: or as you wish to handle the click event

Alert Replacement

Replace native alert with DAlert : dalert.ReplaceAlert();

Example


						dalert.ReplaceAlert();
						alert("Hey... I am a replaced alert");

Confirm Replacement

Replace native confirm with DAlert : dalert.ReplaceConfirm();

Example


						dalert.ReplaceConfirm();
						confirm("Are You Sure?","DAlert Confirm !",function(result){
								if(result){
								dalert.alert("You've just clicked YES !");
								}
								else{
								dalert.alert("You've just clicked NO !");
								}
						});

Configuration :: Options with Parameter Values And Usage

DAlert Options : (dalert_msg, title_msg, options)

Options Array {} :: Customize the look and feel :: Use the third parameter to pass the options array as in the below example

					//Start :: jQuery Click Event :: or as you wish to handle the click event
					$("#dalert_options").click(function(){
						//Start:: DAlert 
						dalert.alert("Message","Tittle",{
							messageFontColor:'white',
							messageBgColor:'rgb(119, 49, 134)',
							tittleBgColor:'black',
							tittleFontColor:'white'
						});
						//End:: DAlert 
					});
					//End :: jQuery Click Event :: or as you wish to handle the click event

messageFontColor = Dialog body font color

messageBgColor = Dialog body background color

tittleFontColor = Dialog tittle font color

tittleBgColor = Dialog tittle background color

DAlert Confirm Parameters: (dalert_msg, title_msg, callback, options)

callback = carries the result boolean value of specific button click from Yes/NO

Example

Example of Confirm Message With Options Defined

					//Start :: jQuery Click Event :: or as you wish to handle the click event
					$("#confirm_options").click(function(){
						//Start:: DAlert Confirm Customized
						dalert.confirm("Message","Tittle",
							function(result){
									if(result){
									dalert.alert("You've just clicked YES !");
									}
									else{
									dalert.alert("You've just clicked NO !");
									}
							},
							{
							messageFontColor:'white',
							messageBgColor:'rgb(119, 49, 134)',
							tittleBgColor:'black',
							tittleFontColor:'white'
							}
						);
						//End:: DAlert Confirm Customized 
					});
					//End :: jQuery Click Event :: or as you wish to handle the click event