Hello,

Is your plugin fully functional or still in beta state of some kind ?
Is it safe to use ?
I'm asking this because the original project ended maintenance and there are other forks based on it.

Thanks. Your plugin looks nice.

Thanks you for AlertifyJS's Developers. As far as I know, It's the best alert plugin.
So I use it in many project.
but in IE7, 8 background not support opacity attribute.
so I try to fix it.

1. background css ( There is only opacity attribute. so add filter alpha)

how to change text box type of alert prompt to password?

Is there an easy way to adjust the notification size (width in particular)?

Thanks,

Hi,

It will be very nice to install it via Bower as well.

Cheers

Hello,

It is probably a stupid question but what is the way to make a real modal dialog box?

In fact, I would like to force the user to click on a button of the dialog box to close it and avoid the closing of the dialog box when clicking outside anywhere on the screen.

The original alertify.js project has the feature.

Thanks in advance and have a nice day.

When clicking the close (x) button on a confirm dialog the "OK" button is triggered which is unexpected behaviour. It should trigger the cancel button.

how to pass other params to custom dialog like "title"?

alertify.dialog('form', function (title) {
        return {
            setup: function () {
                return {
                    options: {
                        title: title,// pass param
                        maximizable: true,
                        closableByDimmer: false,
                        resizable: false
                    }
                };
            },
            prepare: function () {
                this.elements.footer.style.visibility = "hidden";
            }
        };
    }, true, 'alert');

alertify.form("hi", [params]);

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.

If you make use of grunt-wiredep to inject your css/js to your html you will have a problem that it doesn't inject alertify-js

When I created the UI mockup of the app the notification was exactly at the bottom of the page related to the browser window.

Once I converted the mockup to proper app using AngularJS all the notifications are pushed in the very bottom of the body, so I should scroll down to see them...

Problem spotted using Chrome Version 39.0.2171.99.
On Firefox version 35.0 it work as expected.

Any idea how to fix this issue?

I realize after digging through the code that how I was doing things is not really the correct way to do it, but there may still be a bug here.

Here is the fiddle: http://jsfiddle.net/33z0da4f/

It opens two dialogs (pull the second one out of the way to see the first). When you click "okay" you should get a notification. It doesn't work on the first dialog.

The work around is to not pass buttons in, but specify it directly in the factory. That is fine and probably the better way to do things, but I am surprised that the code doesn't work.

Have been evaluating AlertifyJS and can see you have made many improvements on the original.

Using "AlertifyJS" as default title for all dialogs is unfortunate, since the first thing I have to do on every page is change it. It would be better if the default title were the empty string.

hi, im using alertify js with turbolinks enable. In my crude understanding of this, when turbolinks loads a page, it destroys the div element created by notifier js.

 <div class="alertify-notifier ajs-bottom ajs-right"></div>

One missing option appears to be the ability to have a modal dialog in which clicking on the dimmer doesn't trigger the close action.

I found a tiny problem with alertify when float inputs are used on a website like this:

select,
textarea,
input[type = "text"],
input[type = "password"] {
    float: left;
    ...
}

Then the alertify prompt box is not displayed correctly. You can easily fix this by adding just one line to your existing css code:

.alertify .ajs-body .ajs-content .ajs-input {
    display: block;
    width: 100%;
    padding: 8px;
    margin: 4px;
    border-radius: 2px;
    border: 1px solid #CCC;
    float: none; /* this line is added */
}

Is it possible to pass in an option so that alertify does not return focus to the calling element upon closing of a .confirm() prompt? For instance, let's say that upon postback of an ASP.NET page, one uses .RegisterStartupScript and thus alertify is called "from" the body element. In IE 11, returning the focus to the page leaves a dashed border effect upon the page.

Hello
I want to move the user to other page it he click yes (success) and if not reshow the confirm box
thnx

  <script type="text/javascript">
     $("#labels").on( 'click', function () {
        reset();
        alertify.set({ labels: { ok: "Yes", cancel: "No" } });
        alertify.confirm("Do You see the Logo ?", function (e) {
            if (e) {
                alertify.success("Your right");
            } else {
                alertify.error("Your Wrong try more time");
            }
        });
        return false;
     });
  </script>

Here is my jsfiddle.

In the main function, I am using resizeTo to set a custom size. The size of the dialog in that fiddle is what I expect.

In this fiddle, I call the dialog twice. Notice that the size is not correct.

I tried putting the resizeTo in a few other places (prepare and a few of the hooks). I can't get it to work.

I am very happy with alertify but I have one issue that I can't seem to fix. How can I show a message alertify.message over a iFrame with a PDF?

Faster performance http://jsperf.com/jquery-empty-vs-html/14 and allows reusing dialog contents by not destroying the DOM.

I create custom dialog like this

alertify.dialog('customAlert', function(){
  return {
      setup: function () {
           return {
              options:{
                   title: "Form",
                    basic: true,
                    maximizable: true,
                    closableByDimmer: false,
                }
               };
        },
    prepare:function(){
            this.elements.footer.style.visibility = "hidden";
    }
   };
},true, 'alert');

When i pass a long form or text, it show the short dialog with scroll bar.
how to don't show scroll bar, but show long dialog like default alertify.alert()?

Callbacks context should be the dialog instance.

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.

I was wondering how I might position notifications in a 'bottom-center' position? This works well for my mobile-device browser users.

Right now I am using PNotify to provide this functionality (PNotify refers to this as the "bottom bar" style of stack which is set using the stack: stack_bar_bottom option and you can see a demo of it here: http://sciactive.com/pnotify/#stacks), but I would like to use only Alertify.

PS: Love this library!

How can I change the default autofocus on buttons from "OK" to "Cancel":

alertify.confirm("Would you like to delete this service?", function () {
    // ...
});

I use this for delete confirmations and it's too risky if autofocus is set to "OK" by default.

I try use pinnable option, but don't understand.
Please example or explain.

Great libary!
I want to show a prompt popup, hiding the "Cancel" button so the user can only press "Ok".
Is there an option for this?

var alert = alertify.prompt();
alert.set({
    //....  ?
})
alert.show();

using alertify.success as a short cut or using any other way to send a notification works like a charm on both google chrome ( 38+ is my version) and safari ( 7 is my version) but on firefox it has an epic fail with a small part of the notification only appearing on the side of the screen. this has been noticed also with left to right layout but not as much as right to left ones.

Not sure if this is a bug or the desired behavior, but it is not what I expected.

When I have a dialog up and I move it to another place on the screen, then resize the window, the dialog jumps back to the center of the screen, instead of staying where I had put it.

I have tried it in both Safari and Chrome on the first alert on this page.

Request official support for meteor js !!!!

I'm successfully using the Bootstrap them with alerts and prompts etc, however it seems that dialogs continue to use the default theme. I'm using the following settings, and have included the correct stylesheets:

alertify.defaults.transition = "zoom";
alertify.defaults.theme.ok = "btn btn-primary";
alertify.defaults.theme.cancel = "btn btn-danger";
alertify.defaults.theme.input = "form-control";

Thanks for any help you can give.

Subj

Hello,
I was wondering if there is a way to change notifier animation, like this
alertify.set 'notifier', position:'top-left',transition:'pulse'

the default one doesn't work well on android phoneGap it looks laggy.

Cheers

Hello,

I do I remove or destroy a notification manually?

Thanks

Hi,

Thank you for your great product!

Just got a little issue: i have a # href, which is handled like:

$('.ratesbtn1').click(function(e){
ratesPopup1();
e.preventDefault();
return false;
});

In the ratesPopup1() i have:

var rates_popup = document.createElement('iframe');
rates_popup.style.width = "820px";
rates_popup.style.height = "550px";
rates_popup.setAttribute("src","mysrc");
alertify.alert(rates_popup).set('resizable',true).resizeTo(900,700).set('title', 'My Title').set('maximizable', true);

Everything works fine except default event - i can't get rid of it and when user click OK, browser scrolls him to the top. Issue exixts in Chrome on Linux and Safari on iOS. Firefox doesn't scroll user even without preventDefault();

I tried everything with preventDefault at any place, didn't help.

Thank you.

This library has a packages.json but doesn't appear to be published on npm.

browserify is easiest to use with npm modules so it would be nice to have it published.

Hello,

I try to use AlertifyJS on Internet Explorer 8 and I have the following error message:
//copy buttons defintion
var buttonsDefinition = [];
if(Array.isArray(setup.buttons)){
for(var b=0;b<setup.buttons.length;b+=1){

SCRIPT438: The object does not support the property or method « isArray »
File : alertify.js, line : 347, column : 17

Is there any way to make it works on Internet Explorer 8 or the browser will never be supported?

Thanks in advance and have a nice day.

how to create multiple dialog (form)?
I read the docs too, but don't understand.
Please help me.

I create dialog on dialog (multiple at the same time).
And then i want to close the dialog that on current or specific.
The build in function: alertify.closeAll(), alertify.alert().closeOthers()
Please help me.

I would like to show title (header) only and set name, but not footer.

I'm trying to use AlertifyJS with Ember-CLI and couldn't get AlertifyJS to load properly. Ember-CLI currently has problems with unnamed AMD, which is how AlertifyJS is configured.

To figure out a solution to the problem, I dug through d3js code to see how it works (as it works fine with Ember-CLI). This is how d3 loads

if (typeof define === "function" && define.amd) define(d3);
  else if (typeof module === "object" && module.exports) module.exports = d3;
  this.d3 = d3;

AlertifyJS, on the other hand does:

// CommonJS
    if ( typeof module === 'object' && typeof module.exports === 'object' ) {
        module.exports = alertify;
    // AMD
    } else if ( typeof define === 'function' ) {
        define( [], function () {
            return alertify;
        } );
    // window
    } else if ( !window.alertify ) {
        window.alertify = alertify;
    }

Notice the difference on the AMD, d3 checks for define.amd while AlertifyJS does not. If I add that check into AlertifyJS, the third if case fires and I have access to window.alertify within my project. As a side, also doing what d3 does this.alertify=alertify works too.

I personally like the this.alertify=alertify method, but the window.alertify=alertify is workable.

Alertifyjs have the small, and full screen.
But I would like to request the large size like bs3.

alertifyjs v0.6.0

include alertify.js script in head tag return errors

http://jsfiddle.net/jua4L/

Hello,
I've added a new setting to allow disabling invokeOnClose in confirm dialogs when needed, if this is useful for other people, maybe it can be added to the source.

            case 'disableInvokeCancelOnClose':
                if (newValue === true) {
                    this.__internal.buttons[1].invokeOnClose = false;
                }
                break;

Thanks for this great project.

request the minimize command?

For some developers(me included), it is fairly useful to have the option of not giving focus to any of the buttons in the confirmation modal in order to reduce the risk of error from the user, this can be in many cases part of established UX guidelines of a project.
E.g.

// Should be added, currently won't work
 alertify.confirm('No button is focused by default.').setting('defaultFocus', 'none'); 

I will be glad to collaborate to solve this issue (code a solution and open a pull request.)

This is a great plugin, however my customers are wondering that does "AlertifyJS" mean, because this text is on each dialog and I cannot find a way to change dialog title. There should be a way to change the text in title.

Hi there,

Tried myself but not happy with results. What is the easiest way of increasing the resize handle on a dialog ? It's a tad too small for tablets and phones.

Thanks :)

Hi,

I have 2 buttons on a page that calls the alert dialog - one has a callback function and the other doesn't.
However, the callback function is being triggered on both buttons.

OS: Windows 7 Ultimate 64bit SP1
Browser: Google Chrome - Version 42.0.2311.90 m
jsfiddle: http://jsfiddle.net/vbvhdwgo/

In the jsfiddle, there are a few buttons that on click, will show an alert dialog - some with callbacks and some without. Those without the callbacks are still triggering the callback function, with the exception of the last button, which is a workaround I'm currently using (passing in an empty callback function).

This looks like a bug to me but I may also be missing something obvious.

Thanks.