Easy alert-js

jQuery plugin for displaying alerts/notifications

View on GitHub Download .zip

What is easy alert-js?

easy alert-js is a jQuery plugin for displaying both global and element alerts, easy alert has bootstrap alert colors (success, info, warning, danger)

element alerts coming soon!


Global alerts example:




Alert types:




Easy alert animation:

Add jQuery UI to enable easy-alert animations


Define your own alert style:

It is easy to create your own easy alert style. To do this, you need to simply create your own CSS class and pass it to easy alert options

        
            .alert-custom {
                color: #763c3c;
                background-color: #ff003b;
                border-color: #ff003b;
            }
        
    
        
            $.easyAlert('This is a custom alert','custom');
        
    

Events:


Wants more events? Send me suggestions

Options:

        
         {
            'message':'Easy alert-js By Ali Dalal', //default message to be displayed
            'alertType': 'success', //default alert type (warning,info,danger,success)
            'position': 'b r', //preferred position
            'globalMinWidth': '250px', //preferred minimum width of global alerts
            'clickToHide': true,//set whether to hide alert on click
            'autoHide': false,//set whether to automatically hide the alert after a period of time
            'time': 5000,//the time to hide the alert if previous boolean is set to true in ms
            'showAnimation': 'fade', //preferred show animation if jQuery ui is included
            'showDuration': 300,//show duration time in ms
            'hideAnimation': 'fade',//preferred hide if jQuery ui is included
            'hideDuration': 300,//hide duration time in ms
            'globalSpace': 5,//set the space between two global alerts
            'complete': null//callback after alert shown successfully
            'clicked': null//callback after alert is clicked
            'hidden': null//callback after alert is hidden either by click or automatically after a period
        }
        
    

API call:

        
            //to call global alert
            $.easyAlert(message[,alertType,position]);

            //or
            $.easyAlert(options);

            //You can change easy-alert defaults like this:
            $.fn.easyAlert.defaults.alertType = 'danger'

            //Element alert is coming soon