Fork me on GitHub

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

Download [Production Version] Download [Development Version]

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