A simple light weight application modal dialog plugin. Built to support alerts, confirms and prompts for modern day applications.
The plugin was created as part of an application and was built to serve the purpose of creating alerts, notifications, prompts and confirmations. A light weight plugin, App Alert has a bunch of options to configure and supports tracking of alerts via cookies.
As an added bonus, we've included a quick solution on how to override the default alert() function of javascript.
The plugin is jQuery plugin, hence it is dependent on the jquery library. This version of App Alert has been tested with jQuery 1.7.2 - you can get the latest version of jQuery from jquery.com. Include the jQuery library before adding this plugin
<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="/js/jquery.appAlert-1.0.min.js"></script>
Also, it is recommended that you include the stylesheet provided with the plugin. You can modify and customize the stylesheet as per your design requirements.
<link rel="stylesheet" href="css/appalert.css">
App Alert does not require the content of the dialog to be HTML. You can pass a string as the message of the dialog. That does not mean that HTML can't be included!
You can send HTML as a parameter to App Alert or a DOM element can be used as the content for the dialog.
You can include a simple string as the message of the dialog. Run Demo
$(function() {
$.appalert({'message':'Sample content for dialog here'});
});
You can include a HTML as the message of the dialog. Run Demo
$(function() {
$.appalert({'message':'<strong>Sample content for dialog here</strong>'});
});
You can include the entire DOM element as the message of the dialog. Run Demo
Here is an example of how the modal was executed by using the contents of a DOM element.
Notice how the styles associated to this element are also applied to the modal window, considering that they were not inherited styles.
<div id="sample-container">
This is a sample message
</div>
$(function() {
$('#sample-container').appalert();
});
There are a bunch of configurations that can be used to setup the App Alert dialog to be cooler! The configurations below are the complete set of parameters that can be used with App Alert.
<div id="sample-container">
This is a sample message to be displayed
in the modal dialog
</div>
$(function() {
$('#sample-container').appalert({
confirm : true // converts to a confirm box, adds Ok and Cancel buttons
input : true // converts the modal dialog to a prompt box
input_placeholder : 'enter your name' // label for input of prompt
animate : true // add a animated effect of dropping down
animateSpeed : 'normal' //normal, fast, slow or a micro second value
textOk : 'Ok' //text for OK button
textCancel : 'Cancel' // text for cancel button.
overlay : true // add a overlay behind the modal
applybuttons : true // allow button, if false, no button and timeout can be used.
timeout : 5000 // only applicable if applybuttons is false.
width : 0 // 0 = auto, or you can include a pixel value
onSuccess : function() {
// callback function to return TRUE or FALSE
// TRUE = ok button was clicked
// FALSE = cancel button was clicked
}
});
});
Use the animate configuration to show the dialog box with neat dropdown animation. Run Demo
$(function() {
$.appalert({
'message':'<strong>Sample content for dialog here</strong>',
animate:true,
animateSpeed:'fast'
});
});
To use the modal dialog as a confirm box with a OK and Cancel button. Run Demo
$(function() {
$.appalert({
'message':'Are you sure you want to delete this record',
confirm:true,
animate:true,
animateSpeed:'fast'
});
});
A web enthusiast interested in creative and prowess web development. I work with Blue Beetle, an innovative and creative boutique studio in Dubai, United Arab Emirates, as the Technical Lead.
You can follow me on :
GitHub - @smoizs
Twitter - @smoizs
or check out a short profile on about.me
Having trouble with the plugin? Submit an issue today or drop me a tweet at http://twitter.com/smoizs with the hashtag #appalert