A javascript framework for developing pretty browser dialogs and notifications.

Related tags

Learning resource notifications alert modal dialog prompt confirm modal-dialogs alertifyjs
Overview

GitHub version NuGet version npm version jsDelivr Hits

AlertifyJS

Join the chat at https://gitter.im/MohammadYounes/AlertifyJS

AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.

AlertifyJS is an extreme makeover of alertify.js by @fabien-d

Install with NuGet

Install-Package AlertifyJS

Install with NPM

npm install alertifyjs --save

Documentation

Check out the interactive documentation at http://alertifyjs.com

alertifyjs-dialog

Browser support

Last two versions.

Running documentation locally

  • Clone the repo
git clone [email protected]:MohammadYounes/AlertifyJS.git
  • Install dev dependencies
npm update; npm install;
  • Build the project
grunt
  • Start documentation server
docpad run

Dependencies

None.

Community Contribution

Bugs & Questions

Please review the guidelines for contributing.

You can fork this codepen or this jsfiddle to get started.

Contact: [email protected]

Comments
  • problem with get value from text box of dialog, when the second time of dialog opening.

    problem with get value from text box of dialog, when the second time of dialog opening.

    I have

    <a href="javascript:custom();void(0);">alert</a>
-------------------------------------------------------
alertify.dialog('customAlert', function(){
  return {
    prepare:function(){
        this.elements.footer.style.visibility = "hidden";
    }
    };
},true, 'alert');

function custom(){
  alertify.customAlert('<input type="text" id="myName" name="myName"><button onclick="getVal()">Get Val</button>');
}

function getVal(){
  var data = document.getElementById('myName').value;
  alert(data);
}

    -the first click alert, i add abc value in text box, and then i click Get Val btn. // show: abc after that close dialog. -immediately I click alert in the second time, and add new value (def) in text box, then I click Get Val btn again. // show: abc (old value) Please help me.

    question 
    opened by thearabbit 23
  • Callback issue with confirm

    Callback issue with confirm

    Hello,

    the confirm example from the website is working well. Removing the failure callback causes everything to get mixed up. Pressing "cancel" shows the success note and pressing "ok" closes the dialog.

    Code:

    alertify.confirm('Confirm Title', 'Confirm Message', function() { alertify.success('Ok') });

    Demo: http://jsfiddle.net/bm85j26k/

    Workaround Adding null for the failure callback works around the issue, but this is still a bug from my point of view.

    opened by henryruhs 16
  • Focus on a already open alertify?

    Focus on a already open alertify?

    Have stored the reference to all open allertifyes in a object. And when the user tries to open the the same that he already have open. Than I want to focus the already open one. If is use .show() it resized and moves to its origin position?

    What can I do to fix this?

    feature 
    opened by stoivo 13
  • Feature request :) noPropagateClicks

    Feature request :) noPropagateClicks

    Hello! I have added a new option in my fork, noPropagateClicks. This option prevent passing the clicks events to other event listeners, when the alert is displayed.

    This has solved my problem, which was following...

    My customer's website has some legacy code for the "side windows". Those windows listening for the click events of <body> and hiding itself on each click outside the window. I must prevent them from hiding when the alert is displayed. However, unfortunately, I can't use isOpen() method to test whether the alert box is displayed. After any click on the alert's OK button or dimmer, isOpen() will return false. The side windows catching that click, recognizing it as "outside" click and hiding itself (which is wrong).

    So it looks like the only solution to not pass the clicks to other listeners outside of an alert -- is to prevent their propagation.

    And It would be really cool if you can add noPropagateClicks or similar option to the canonical version of AlertifyJS.

    Thank you!

    opened by utilmind 12
  • Multiple minimalDialog on a page: Hooks still holds on to the first instance

    Multiple minimalDialog on a page: Hooks still holds on to the first instance

    I've previously asked about how to have multiple minimalDialog windows on the same page, and making sure content is refreshed in accordance with the new opened window.

    The trick was to assign content to a variable:

    prompt_content = el.attr("prompt-content");

    and then replace this trigger:

    return alertify.minimalDialog(prompt_id)
               .set('resizable', true).resizeTo('90%', '80%');

    with this:

    return alertify.minimalDialog(prompt_id, prompt_content)
               .set('resizable', true).resizeTo('90%', '80%');

    But I now find out that everything that's happening inside the hooks (onclose, onshow, etc.) is set only once, which is the first time a window is opened. So if I e.g. want to:

    hooks: {
  onshow: function() {
    console.log("Hello for the first time");
  }
}

    in the first implementation, but I want to:

    hooks: {
  onshow: function() {
    console.log("Hello for the second time");
  }
}

    in my second implementation, then the console.log("Hello for the first time"); will be triggered both first and second time.

    How do I refresh my hooks?

    question 
    opened by ChristofferJoergensen 12
  • Multiple custom dialogs - unable to change content of only one specific instance

    Multiple custom dialogs - unable to change content of only one specific instance

    I have tried to create multiple custom dialogs within the same view. Once two or more custom dialogs have been created, they remain bound to the page. So now, I have a list of custom dialogs existing in the background, with at most one open at any given point in time.

    The issue lies in the fact that if I want to keep some different content in each of them I simply can't tell the dialogs to implement that behaviour since there is no way to do so. Having used the prepare function does not help, since this modifies all instances of alertify. There is no unique ID for each instance, and this leads to further problems when used with other frameworks such as TagIt (which works only for the first instance where it appears). I would normally expect each dialog to have that unique ID that can be used to call for changes to be made only to one dialog, and not to all of them.

    In my case, the prepare function to loads the data. This means that all my alertify instances from the background get their content replaced with the content I intend to use for one of those instances. Having an instance of TagIt within my dialog content, and since TagIt will work only for the first instance that it appears in, I am unable to use that framework unless I somehow find a way to attach a unique ID to each dialog.

    So is there any way around this? Or was the dialog system not designed to support multiple custom dialogs with different content?

    discussion 
    opened by RaulButuc 12
  • Problem with

    Problem with "title" param in confirm and prompt?

    I try set title

    alertify.alert(title, message); // word fine
alertify.confirm(title, message, onok);// title don't work
alertify.prompt(title, message, value, onok);// title don't work

    please help me.

    question 
    opened by thearabbit 12
  • Problems with layout CSS

    Problems with layout CSS

    The css techniques used to layout the dialog cause some problems with trying to create some types of dialogs.

    Firstly, The content area is laid out using absolute positioning. Due to this it's impossible to let a dialog's content expand vertically when you intentionally want a larger dialog. To do so the hight would have to be hardcoded.

    Static/relative positioning of the content, with padding/margins to free up the space for the absolute positioned header and footer would be better.

    Secondly,

    .alertify .ajs-body .ajs-content p { margin: 0; }

    This ruins multi-paragraph dialogs because all spacing between them is gone. And if you've carefully tuned your p you can't just un-set this override, you have to explicitly override it with your default.

    discussion 
    opened by dantman 12
  • Extra empty white notification on startup

    Extra empty white notification on startup

    Hello.

    If I add .css files from this library to empty page, it'll display empty white notification when page is loaded. Even it's not required to add .js file to page.

    Example: https://youtu.be/wzO5EpREMbg

    Screenshot: screenshot from 2018-09-15 13-19-26

    Probably the problem is somewhere in alertify/css/alertify.css, only it's removing affects on notification displaying.

    Is present on Firefox 61, 62. OS: Linux Mint x64 19 Cinnamon

    Tried 1.11 version, 1.10, 1.5 - result is the same.

    Couldn't reproduce on latest Chromium.

    Can someone help me with it. I think it's not the same as https://github.com/MohammadYounes/AlertifyJS/issues/190 , because that solution didn't worked for me. Notification has different classes (see screenshot).

    Thank you.

    cannot reproduce needs test case troubleshooting 
    opened by vlad0337187 11
  • Reset Confirm buttons after change labels

    Reset Confirm buttons after change labels

    After I change confirm labels for a dialog, if I use confirm once again in same page, buttons should reset.

    For exmple even on your page after you click change label example and then the other ones the labels stay like I customized them.

    I add 2 pictures from your page to show it.

    first

    then

    as you can see, labels havent resetted theirselves

    I m sorry because of bad English ;)

    thanks

    duplicate 
    opened by serdarde 11
  • How to attach 'Submit, Other btn' of

    How to attach 'Submit, Other btn' of "Meteor autoForm" to footer??

    I create custom alertify and pass the autoForm of Meteor like this

    <template name="addressInsert">
    {{#autoForm collection=Sample.Collection.Address id="addressInsert" type="insert"}}

        {{> afQuickField name='name'}}

        <button type="submit" class="btn btn-primary"> Save</button>
        <button type="button" class="btn btn-default"> Other</button>
    {{/autoForm}}
</template>

    So I want to attach the submit, other btn to alertify footer and then use any Autoform Hook, other btn template event. Please help me.

    question 
    opened by thearabbit 11
  • Brave blocks Alertify

    Brave blocks Alertify

    With the Brave new feature to prevent cookie windows, alertify (notifier) no longer works. To test I invite you to follow the procedure described at https://brave.com/privacy-updates/21-blocking-cookie-notices/.

    By modifying the defined classes it is possible to circumvent this, except that alertify does not take into account the modification of the notify classes defined in configuration. I looked a bit in the code and indeed it uses the classes defined in the defaults object.

    opened by keupsonite 5
  • Commercial license purchase not working?

    Commercial license purchase not working?

    Hi guys - I attempted to purchase through https://www.uplabs.com/posts/alertifyjs multiple times but this hasn't gone through.

    Is this still the best way to purchase @MohammadYounes?

    opened by marcfowler 2
  • ESC/ENTER/TAB Press always invoke oncancel call

    ESC/ENTER/TAB Press always invoke oncancel call

    When i click on ESC/ENTER/TAB i always get the key value as 23 which is for escape key . I am not getting different key values for different keypress .

    needs test case 
    opened by rahulsinghkv11 1
  • License using LGPL

    License using LGPL

    Using GPL license means any sofware using this must also be licensed under GPL. For a dialog library seems a bit too much. I would suggest changing the license to LGPL (https://www.gnu.org/licenses/lgpl-3.0.en.html). It would keep it open source, ensure changes must be available but won't make any extra restrictions on the license of the sofware using it.

    opened by i23098 1
  • Use just one component for optimization

    Use just one component for optimization

    Hi, It's a great package and thanks for that.

    I use webpack, can i import each component directly? for example I need just notifier and don't need diagonal. can i just import notifier js? and LESS too. I try it with js, but get error :( there is any solution?

    feature 
    opened by Farshadi73 1
  • No accessibility / ARIA support

    No accessibility / ARIA support

    I cannot find any documentation on accessibility options for Alertify.js, nor note any mention of ARIA attributes in the source code.

    Is accessibility an upcoming or planned feature?

    feature 
    opened by Ronamo 1
Owner
Mohammad Younes
Mohammad Younes
GitHub https://alertifyjs.com
Pretty-print-json - 🩋 Pretty-print JSON data into HTML to indent and colorize (written in TypeScript)

pretty-print-json Pretty-print JSON data into HTML to indent and colorize (written in TypeScript) 1) Try It Out Interactive online tool to format JSON

Center Key 87 Dec 30, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till mÀnniskor pÄ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

AsgarAlert (v1) for JS Install <script defer src="/asgar-alert.js"></script> Examples The most basic message: asgar("Hello world!"); A message signali

Asgar Aliyev 5 Dec 20, 2022
Dialogs based on Bootstrap 5 modal

Simple dialogs based on Bootstrap 5 modal Lightweight pure js dialogs library, min ad gz size less 2 kB Dependencies bootstrap 5 demo Dialogs ok_cance

Alexander 7 Oct 29, 2022
Pretty, customisable, cross browser replacement scrollbars

jScrollPane - cross browser custom scroll bars jScrollPane is a jQuery plugin which allows you to replace a browser's default scroll bars (on an eleme

Kelvin Luck 2.2k Dec 15, 2022
Progressive Web App (PWA) built in Node.js & Express that automatically reloads/refreshes your browser, web page, and app when developing.

Expresso ☕ Checks for changes in your source and automatically reloads your browser, or web page, and app window. Makes development easier. Report Bu

Start Rev Technology 3 Oct 6, 2022
A lightweight JavaScript library for creating interactive maps and pretty data visualization.

Jsvectormap A lightweight Javascript library for creating interactive maps and pretty data visualization. Explore docs . Report bug · View demo · Down

Mustafa Omar 204 Dec 24, 2022
A Javascript based web application for monitoring, analytics and notifications

JELLYWATCH Jellywatch is a javascript web application for monitoring*, analytics** and notifications** inspired by tautulli for Jellyfin/Emby Media Se

null 27 Dec 28, 2022
✹ Small and Clean JavaScript Toast Notifications

BuzzNotify Small and Clean JavaScript Toast Notifications New version introduces breaking changes! Now the styles come separately and you will have to

R. Eliut 9 Aug 23, 2022
Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Pure Javascript Toaster Requires Nothing Demo Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options

Kuldeep 2 Jun 21, 2022
Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

???????? Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name. Fnon is a client-side J

Adel N Al-Awdy 5 Sep 11, 2022
A dependency-free JavaScript library for creating discreet pop-up notifications.

Polipop A dependency-free JavaScript library for creating discreet pop-up notifications. Demo See demo at minitek.github.io/polipop/. Documentation Se

Minitek 8 Aug 15, 2022
A lightweight JavaScript library for creating snackbar & toaster notifications.

Notify.js Notify.js is a lightweight (2.3kb) utility library for creating snackbar and toaster notifications. Installation Download Notify.js via NPM:

Kyle Andrews 7 Feb 13, 2022
AppRun is a JavaScript library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.

AppRun AppRun is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and compon

Yiyi Sun 1.1k Dec 20, 2022
✹ Properly credit deps and assets in your projects in a pretty way.

Acknowledgements ✹ Properly credit deps and assets in your projects in a pretty way. About Acknowledgments is a CLI tool that generates a JSON file wi

Clembs 5 Sep 1, 2022
An open-source, pretty, simple and fast meilisearch UI for managing your meilisearch instances

Meilisearch-UI An open-source, pretty, simple and fast meilisearch UI for managing your meilisearch instances [IMPORTANT] The main branch may be unsta

Kyrie Lrvinye 29 Dec 29, 2022
This is an app developed in the Microverse course, it is a simple app used for developing a task list, using JavaScript modules and webpack

TODO LIST This is an app developed in the microverse course, developing a task list, using Javascript modules and webpack A simple app to help you man

JUSTINE IMASIKU 5 Jul 28, 2022