JavaScript Alert/Notification System


alertify.js - browser dialogs never looked so good

The end of maintenance... at least for now

Unfortunately, I will no longer be maintaining alertify.js. I have many ongoing projects that aren't leaving me with enough time to do what needs to be done. If anyone wants to create a fork and maintain - by all means go for it!

It's been great seeing people use it and enjoy it and this decision is simply because I don't believe it's fair that developers are looking for help and not getting it.

I wish I had more time or contributions to keep it going and make it better, but the sad reality is that not usually the case on these kinds of projects.

Why is this repo empty?

Each version of alertify is currently in its own branch and tagged to be used with bower.

  • 0.3 - Latest release 0.3.11
  • 0.4 - (Deprecated)
  • 0.5 - Not yet released

Opening issues

When opening a new issue, please note that the more information you provide, the better chances someone will be able to assist you. All issues should copy the template below and fill out the blanks. This ensures that the issue can be effectively reproduced and solved.

### Describe the issue you are having
[insert description]

### What version of alertify.js are you using
[insert version]

### Steps to reproduce the issue
1. [insert steps]
2. [insert steps]

### What browser(s) is this happening in
[insert browsers]

### Link to reproduced issue
[insert link]

### Screenshots (if applicable)
[insert screenshots]

Getting started

Checkout the wiki to get up and running with alertify.js.


Where is it being tested?

  • Microsoft Internet Explorer 8+ (Standards Mode)
  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Opera
  • iOS
  • Android

Credit where credit is due

See all list of contributors

Release history

For full details, see the alertify.js changesets


alertify.js is licensed under MIT


Copyright ©, Fabien Doiron
[email protected], @fabien_doiron

  • Adding buttonFocus option

    Adding buttonFocus option

    Added a buttonFocus option so user can specify which button (or none) to focus by default.

    I know this PR won't get accepted yet as I haven't successfully managed to write the tests, nor have I grunted - I just want to share and get the code green lighted before I go though with that.

    opened by quasipickle 20
  • WIP - Version 0.5.0

    WIP - Version 0.5.0

    The todo list will be growing...



    • [x] Set passed title message
    • [x] OK button


    • [x] Set passed title message
    • [x] OK button
    • [x] Cancel button


    • [x] Set passed title message
    • [x] OK button
    • [x] Cancel button
    • [x] Input field
    • [x] Set default input field value


    • [ ] Finalize base theme. #187
    • [x] Set proper alertify--TYPE class name
    • [x] Handle attempt to open multiple dialogs at one time.
    • [x] Keep focus inside dialog
    • [x] Reset the focus to the last focused element before the dialog was open
    • [x] Show cover when dialog opens
    • [ ] Update ARIA attributes based on state
    • [x] Keyboard shortcut - ESC = cancel, Enter = OK


    • [ ] Add growl notifications? Or open separate repo...
    • [ ] Allow dialogs to queue? #174

    This PR will most likely be long running and changing over time.

    New look







    New API & Usage

    Only supports dialog at the moment. I am thinking of moving the growl notification into its own project. 0.5.0 moves away from dynamically creating the alert dialogs and now includes the markup directly in the page.


    <!-- in the head tag -->
    <link rel="stylesheet" href="PATH_TO/alertify.core.css">
    <link rel="stylesheet" href="PATH_TO/alertify.default.css">
    <!-- preferably just before the closing body tag -->
    <div id="alertifyCover" class="alertify-cover alertify-hidden" aria-hidden="true"></div>
    <section id="alertifyDialog" class="alertify alertify-close" aria-labelledby="alertifyTitle" aria-hidden="true">
        <div class="alertify-body">
            <p id="alertifyTitle" class="alertify-title"></p>
            <input type="text" id="alertifyInput" class="alertify-input" aria-hidden="true">
            <nav id="alertifyButtons" class="alertify-buttons">
                <button id="alertifyButtonCancel" class="alertify-button alertify-button-cancel" aria-hidden="true"></button>
                <button id="alertifyButtonOk" class="alertify-button alertify-button-ok" aria-hidden="true"></button>
            <a id="alertifyFocusReset" class="alertify-focus-reset" href="#" aria-hidden="true"></a>
    <script src="PATH_TO/alertify[.min].js"></script>


    // basic
    alertify.alert( 'Title' ).show();
    // advanced
    var alert = alertify.alert( 'Title' );
    alert.ok = function () {
        // OK


    // basic
    alertify.confirm( 'Title' ).show();
    // advanced
    var confirm = alertify.confirm( 'Title' );
    confirm.ok = function () {
        // OK
    confirm.cancel = function () {
        // Cancel


    // basic
    alertify.prompt( 'Title' ).show();
    // advanced
    var prompt = alertify.prompt( 'Title' );
    prompt.ok = function ( val ) {
        // OK
        // val => Value of input field
    prompt.cancel = function () {
        // Cancel

    Extra methods

    A few extra methods are available on each dialog.

    var alert = alertify.alert( 'Title' );
    alert.onshow = function () {
        // called on dialog show
    alert.onclose = function () {
        // called on dialog closed
    alert.onfocus = function () {
        // called after focus to element has been set
    };; // shows the dialog
    // close() is available if a dialog must be closed programmatically, 
    // it's automatically call on click of a button
    alert.close(); // closes the dialog
    opened by fabien-d 17
  • alertify.prompt scrolls the page to the top (default theme, chrome 18)

    alertify.prompt scrolls the page to the top (default theme, chrome 18)

    When I trigger a prompt dialog at the bottom of a long page the document jumps to the very top. I'm using the default theme and (the rather old Chrome 18, cannot update on this machine will try with a newer chrome)

    Also when the dialog opens and the page scrolls, the entire page flashes black for a split second.

    I don't see why this is happening, given that position fixed is used on the container element for the dialog. Firefox behaves as expected (no flash, no page scroll)

    opened by dschwen 16
  • Setting type and attributes for Prompt's input

    Setting type and attributes for Prompt's input

    It would be nice if we could set the input's type and some of its attributes, you can make use of HTML5's new input attributes and types:


    1. autocomplete: for turning autocomplete on or off.
    2. pattern: for restricting input, for examle, to only numbers or letters.


    1. email
    2. number
    3. url or other types.

    enhancement discussion 0.4.* 
    opened by CIAvash 13
  • 0.3.8 hangs Safari and Chrome on iPad 1 when using alert/confirm/prompt

    0.3.8 hangs Safari and Chrome on iPad 1 when using alert/confirm/prompt

    I'm using Alertify in a yeoman project using require.js to load it. It works pretty well in all Browsers I have seen so far, but it completely hangs Safari on iOS 5.1.1 as well as latest Chrome.

    noticeUser: ->
      if @model.get('status') == 'completed'
        Alertify.set labels:
          ok: "Thanks"
        Alertify.alert "Your data has been sent."
        Alertify.set labels:
          ok: "Ok, I'll try later..."
        Alertify.alert "Error during sending your data!"

    This piece of coffe triggers the error. Both browsers become completely unresponsive to touch events in the rendering area. Orientation change still works, and the page can be reloaded, but fails then in the same situation.

    Any ideas what could cause this behaviour? Any workarounds?

    Regards Jan

    bug 0.3.* 
    opened by janroesner 12
  • Alert not dismissing on 'ok' click

    Alert not dismissing on 'ok' click

    When I use alert dialog, the "ok" button appears to be clicked, but does not trigger the click event. On mouseclick down, i see the button itself disappear, revealing a small ok text link. On mouseclick up, the button reappears. Clicking the button doesn't register the dismiss event, only clicking the button exactly where the underneath text link is will register the dismiss event. I don't see this behaviour in the sample page :-(. I get the same issue with FF 16 and IE 8/9 on windows xp (i know ... its a work machine)

    All JS disabled (except as below). Issue still present in: *FF16, IE8 on WinXP *FF17, IE10 on Win7 Works in Chrome on Win7.

    My Code:

    <script language="javascript">
    function gotoButtonClick() {
        /* validate the mandatory fields */
        alertify.alert("Please enter Phone # and SIM Serial #", function () { 
            //after clicking OK
    <!-- JavaScripts -->
    <script src="./js/alertify.min.js"></script>

    Pics show what happened after alert slides in. *First pic shows mouse click-down on button - reveals small 'ok' text link. *Second pic shows mouse click-up - shows the button again, dialog is not dismissed *ONLY when the button is clicked why hovering EXACTLY over the hidden 'ok' text link, is the alert dialog dismissed

    click_down_button click_up


    It was a clash with some custom css :-(

    opened by stickhandle 12
  • Problem with prompt on iOS

    Problem with prompt on iOS

    I built the latest code (0.3 had an unrelated issue so I can't use that) and am having issues with prompts (iPhone breaks, iPad seems to be ok, Safari/Chrome desktop seems fine).

    If I enter a value and either hit go on the iOS keyboard or hit the OK (alertify) dialog button, the keyboard remains visible (even though the dialog and text field are gone) and the body ends up being disabled. I try touching some of my elements my callback ends up being called again.

    Hopefully I've described this ok let me know if I'm not making any sense.

    bug 0.4.* 
    opened by gschrader 10
  • Don't auto focus on OK button

    Don't auto focus on OK button

    In 100% of the cases I use a confirm dialog, I am making double sure the user wants to take the action they just indicated, because the action is dangerous or has big consequences. In these cases it's dangerous to have the OK button focused by default, as I want the user to do extra work to complete the action.

    Can alertify get a new property, say focusOn, that allows one to set whether the focus should be on ok, cancel or none?

    opened by quasipickle 10
  • Confirm with Alert in result

    Confirm with Alert in result

    I have a confirm which, in turn calls an ajax call, and if the ajax call returns something invalid, an alert is shown.

    The confirm works fine, but the alert flashes up and then disappears without me being able to read it.

    Cut down version of the code here:

    I have replaced the alertify alert, with a standard alert and I get the result I require but without the nice look... I'd love to be able to resolve this and have an alertify alert.

    This is running in Chrome 27.0, on alertify v3.9

    bug 0.3.* 
    opened by christatedavies 9
  • alertify not defined

    alertify not defined


    I develop a website in and I wanted to add alertify on it. The problem is that I insert alertify.min.js (and the css core and default) and when I want to call alertify, I have an error saying "alertify is not defined". It considers that alertify does not exist as if I had not inserted it in the page.

    I guess there is something making a conflict but I don't know what...

    For information, I use a scriptManager (it activates AJAX for ASP.NET) and I use many jQuery scripts. Could it be the source of this problem? I spent a lot of time on it, but I didn't find anything conclusive...

    Can you help me please?

    opened by babaxx 8
  • Any way to make it working in (IE9)

    Any way to make it working in (IE9) "Compatibility" mode?

    I downloaded a stable version and tried

     alertify.set({ labels: {ok: "Accept", cancel : "Deny"} });
     alertify.confirm("Confirm dialog with custom button labels", function (e) {
     if (e) { alertify.success("You've clicked OK"); }
     else { alertify.error("You've clicked Cancel"); }

    In IE9 in compatibility mode a dialog displays only the left button, until you hover a mouse over the place right button is supposed to be. In IE standard mode it works fine (and works fine in Chrome.)

    opened by vkelman 8
  • Alertify Confirm Automatically Refresh Page

    Alertify Confirm Automatically Refresh Page


    Could anyone help me with using

    alertify.confirm("This is a confirm dialog.",

    Because when i use that code when the message box pop up, it automatically refresh the page. I didn't call any refresh page. So when the messagebox pop up i have no time to choose or click ok or cancel because it refresh the page.

    Is that a bug ? how i can prevent it from refresh the page ?

    Thank You

    opened by DennisLiu88 2
  • a href tag

    a href tag

    Dear Fabien, hope all is well, you answered a question before for a href


    `$(document).ready(function(){ $('.delete-page').on('click', function(event){ // add me, stop the default link from clicking event.preventDefault();

        alertify.confirm("Message", function (e) {
          if (e) {
              // use window.location and go to a->href
          } else {            
            return false; 


    what if i have an id thats passed with in href?xxxx?$id? when a user clicks in the table it takes the id so, i guess in this case it wont work?

    Thank you so much

    opened by TeeeeJay 0
  • Confirm popup not wotking for mobile device

    Confirm popup not wotking for mobile device

    it's any solution? Confirm popup not wotking for mobile device? on desktop working perfectly:

    <script src="lib/alertify.min.js"></script>
    	function reset () {
    		$("#toggleCSS").attr("href", "themes/alertify.default.css");
    			labels : {
    				ok     : "ok",
    				cancel : "cancel"
    			delay : 5000,
    			buttonReverse : false,
    			buttonFocus   : "ok"
    opened by kostabbosta 0
  • 0.3 ability to close individual/all notifications from code

    0.3 ability to close individual/all notifications from code

    This pull request is improved from the pull request #239

    Needed this functionality on my ajax requests. Open a notification, save that notification on a variable, do stuff and close it.

    What i did was, changed the log,error and success notification methods' return value from alertify object to a 0-100 math random number. Random value is used as part of the class name of the notification to be created, and with the closeNow() method, i used it to close the dialog i wanted to close. And while i found some time to kill, i added a closeAll() method that closes all open notifications with the same idea.

    After that i edited the example page to test, document/explain what i did. Used a minifier to minify the edited js file.

    Quick usage:

    tempNotification = alertify.log("A persistent nofitication (This one will be closed)", "", 0);
     ... // do stuff
    alertify.closeNow(tempNotification); // closes spesific notification
    alertify.closeAll(); // closes all of the open notifications.
    opened by Kambaa 0
Fabien Doiron
Software Developer - Front End @pagecloud
Fabien Doiron
A Powerful and Elegant "alert" library for JavaScript that replaces that boring alert style of Javascript.

A Powerful , Elegant and fully customizable "alert" library using JavaScript that replaces that boring style of alert. Installation Place the below sc

Cosmogic 11 Aug 10, 2021
It's an alert library build with JavaScript. You can replace your traditional JavaScript alert, confirm and toast with the library.

asteroid-alert It's an alert library build with JavaScript. You can replace your traditional JavaScript alert, confirm with the library. It has also e

Khan Md Sagar 4 Mar 12, 2021
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
A customizable lightweight Alert Library with Material UI and awesome features.

SoloAlert A customizable lightweight Alert Library with Material UI and awesome features. view soloalert on npm : Inst

Arnav Kumar 21 Nov 30, 2022
A simple, jQuery free Snackbar (Toast) alert

js-snackbar What is a SnackBar? According to Material Design a Snackbar or Toast provides "brief messages about app processes at the bottom of the scr

Michael Mickelson 43 Jan 5, 2023
Lightweight and simple notification library in Vanilla JavaScript.

SimpleNotification SimpleNotification is a library to display simple yet customizable notifications. You can stylize text with a simple syntax, add bu

null 14 Dec 11, 2022
Send slack notification with BQ results

bq2slack-github-action Send slack notification with BQ results. How to use Sample github actions workflow yaml name: Run SQL against BQ and notify sla

Data-i Consulting 4 Dec 16, 2022
Manage and monitorize your notification using only your terminal :3

Notifications Monitor Monitor your notifications and get a temporary list of the notifications. Dependencies Node.js (to run the program; by default,

Gabriel Guerra 3 Apr 12, 2022
Adds a notification to hydrate yourself!

Water Break This plugin simply puts a notification in the upper-left of the window. This will alert you to drink some water! Install ipm install water

Andrew Burke 6 Sep 24, 2022
Get a desktop notification every time a new correction slot is available for your 42 project.

42_slot_watcher A simple node.js corrections slots watcher for 42, working on Windows - MacOS - Linux. What is this I was bored of having to refresh t

Maxime 7 Dec 20, 2022
Simple, cli-first, mobile push notification across systems. Simple, cli-first, mobile push notification across systems. Install In each folder, run npm install. The expected node version is 14. (Highe

David Alen 7 May 20, 2022
Notification handler. KISS, light and library free.

Notification.js Notification.js is a standalone ES6 module that allows you to easily handle several notifications from different types at the same tim

Arthur Beaulieu 2 Nov 25, 2020
jQuery quick notification plugin. jQuery плагин быстрых уведомлений

Note: English translation by Google Translate Notific About Description: this is a jQuery plugin that helps you display notifications on your site. Li

Webarion 2 Nov 7, 2021
Vanilla JS toast notification.

Toasting Toasting - is a javascript library for notifications. There is no dependencies needed. Installing There is no npm or cdn is available yet. by

Tharith Phon 1 Jun 30, 2022
A simple and light jquery library for toast notification!

What is notify message? Notify message it's a simple jquery library for create a simple and light push notification in your website! How does this wor

Ivan Persiani 3 Feb 23, 2022
jQuery plugin for a Notification Bar

jquery.peekABar A jQuery plugin for a notification bar with customization options. Important Note We have stopped supporting bower as a package manage

null 59 Dec 11, 2022
Denail of service system for the Dentistimo system. Used to improve the tolerance and testing fail safe functionality.

Distributed Systems - Dos Testing DoS (Denail of Service) System for Testing and Practical demonstration of systems capability to handle a basic DDoS

null 28 Nov 8, 2022
🐬 A simplified implementation of TypeScript's type system written in TypeScript's type system

?? HypeScript Introduction This is a simplified implementation of TypeScript's type system that's written in TypeScript's type annotations. This means

Ronen Amiel 1.8k Dec 20, 2022