Usage Examples

$.fallr(method:String [,options:Object] [,callback:function]);

Alert-like

$.fallr('show', {
    content : '<p>Howdy.</p>'
});

demo

Prompt-like

var clicked = function(){
    var yourname = $(this).children('form').children('#yourname').val();
    alert('Hello, ' + yourname);
    $.fallr('hide');
};

$.fallr('show', {
    buttons : {
        button1 : {text: 'Submit', onclick: clicked},
        button2 : {text: 'Cancel'}
    },
    content : '<p>Give me your name</p><form><input type="text" id="yourname" /'+'></form>',
    icon    : 'form'
});

demo

Coming from below

$.fallr('show', {
    content : '<p>You\'ve got a message</p>',
    position: 'bottom'
});

demo

Centered

$.fallr('show', {
    content : '<p>Hello there</p>',
    position: 'center'
});

demo

Forms

var login = function(){
    var user = $(this).children('form').children('input[type="text"]').val();
    var pass = $(this).children('form').children('input[type="password"]').val();
    if(user.length < 1 || pass.length < 1){
        alert('Invalid!\nPlease fill all required forms');
    } else {
        alert('username: '+user+'\npassword: '+pass);
        $.fallr('hide');
    }
}

$.fallr('show', {
    icon        : 'secure',
    width       : '320px',
    content     : '<h4>Sign in</h4>'
                + '<form>'
                +     '<input placeholder="username" type="text"/'+'>'
                +     '<input placeholder="password" type="password"/'+'>'
                + '</form>',
    buttons : {
        button1 : {text: 'Submit', onclick: login},
        button4 : {text: 'Cancel'}
    },
});

demo

Close with clicking overlay / pressing ESC key

$.fallr('show', {
    closeKey        : true,
    closeOverlay    : true,
    content         : '<p>Click on overlay or press ESC to close this message</p>',
    icon            : 'info'
});

demo

Fullscreen size

var gap     = 20;
var boxH    = $(window).height() - gap;     // bottom gap
var boxW    = $(window).width() - gap * 2;  // left + right gap

$.fallr('show', {
    content : '<p>Fullscreen</p>',
    width   : boxW,
    height  : boxH
});

demo

Etc. (will be added later)

Confirm-like

var clicked = function(){
    alert('congrats, you\'ve deleted internet');
    $.fallr('hide');
};

$.fallr('show', {
    buttons : {
        button1 : {text: 'Yes', danger: true, onclick: clicked},
        button2 : {text: 'Cancel'}
    },
    content : '<p>Are you sure you want to delete internet?</p>',
    icon    : 'error'
});

demo

Multiple choices

var clicked = function(n){
    alert(n);
};
$.fallr('show', {
    buttons : {
        button1 : {text: 'Yes', onclick: function(){clicked(1)}},
        button2 : {text: 'Yes to all', onclick: function(){clicked(2)}},
        button3 : {text: 'No', onclick: function(){clicked(3)}},
        button4 : {text: 'Whatever', danger: true}
    },
    content : '<p>Pick one</p>',
    icon    : 'help'
});

demo

Setting duration & easing effect

$.fallr('show', {
    duration    : 1000,
    easingIn    : 'easeOutBounce',
    easingOut   : 'easeInElastic',
    icon        : 'card',
    position    : 'center',
    content     : '<h4>Animation please</h4><p>Everyone wants animation.</p>'
});

demo

Passing callback function

var hide2 = function(){
    $.fallr('hide', function(){
        alert('callback after 2nd hide');
    });
};

var hide1 = function(n){
    $.fallr('hide', function(){
        alert('Hi, this is a callback after hide');
        $.fallr('show', {
            content     : '<p>You choose ' + n + '</p>',
            position    : 'bottom',
            buttons     : {
                            button1 : {text: 'OK', onclick: hide2}
            }              
        }, function(){
            alert('callback after 2nd show');
        });
    });
};
	                
$.fallr('show', {
    icon        : 'warning',
    content     : '<p>Yes or No?</p>',
    buttons     : {
                    button1 : {text: 'Yes', onclick: function(){hide1('Yes');}},
                    button2 : {text: 'No', onclick: function(){hide1('No');}}
    },
}, function(){
    alert('Hi, this is a callback after show');
});

demo

Custom size & On-the-fly Auto resize

var smaller = function(){
    $.fallr('resize', {width: '400px', height: '400px'});
};
var bigger = function(){
    $.fallr('resize', {width: '500px', height: '500px'});
};
$.fallr('show', {
    content : '<h4>Click a button to resize</h4><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>',
    buttons : {
        button1 : {text: 'Smaller', onclick: smaller},
        button2 : {text: 'Bigger', onclick: bigger},
        button3 : {text: 'Cancel'}
    },
    width: '400px',
    height: '400px',
    position: 'center'
}, function(){
    // on show callback
    $.fallr('resize', {width: '450px', height: '450px'});
});

demo

tDef