A framework-agnostic styled alert system for javascript.

Lightweight, flexible, css3 animation, blah blah blah easy to use something clever needs to go here.

Best of all, it's really easy to use. WOW!


Look at these examples:

smoke.signal('this goes away after a few seconds'); smoke.alert('this is a normal alert'); smoke.confirm('behaves like a normal confirm()'); smoke.prompt('behaves like a normal prompt?');

You can implement these the same way you'd use the js alert()...just put "smoke." in front of it.

The confirm() replacement, however, needs to be used just a little differently:

smoke.confirm('You are about to destroy everything. Are you sure?',function(e){
    if (e){
        smoke.alert('OK pressed');
    }else{
        smoke.alert('CANCEL pressed');
    }
});

prompt(), similarly:

smoke.prompt('what\'s my name?',function(e){
    if (e){
        smoke.alert('my name is '+e);
    }else{
        smoke.alert('no');
    }
});

And if you want the smoke.alert() to behave exactly like a native alert(), you can have subsequent actions happen in a callback like so:

smoke.alert('look at that alert, man.', {}, function(){
    // oh what now?
});

Want to do custom button labels? Try this:

smoke.alert('this is cool', {ok:"yeah it is"});

smoke.confirm('this is still cool, yeah?',function(e){
    if (e){
        smoke.alert('OK pressed');
    }else{
        smoke.alert('CANCEL pressed');
    }
}, {ok:"yeah it is", cancel:"no way"});
        

Need a default value for a prompt? Prepare to be amazed:

smoke.prompt('what\'s for dinner? (omg please say pizza, please say pizza)',function(e){
    if (e){
        smoke.alert(e);
    }else{
        smoke.alert('no');
    }
},{value:"pizza"});
        

Maybe you want to specify different styles for a specific alert. Just add a classname parameter like this:

smoke.alert('this is cool', {classname:"myclassname"});

Additionally, it's super easy to change the look of your dialogs. We've included a few sample themes to give you an idea you what you can do with this thing:

light style (default) dark style 100s style (best one) tiger style

If you happen to make a theme you'd want to share with everyone, go ahead and add a pull request on github.