< Fallr >

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'
});
                    

democode

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    : 'trash'
});
                    

democode

Setting duration & easing effect (require easing plugin)

// make sure you have include jQuery easing plugin first: 
// http://gsgd.co.uk/sandbox/jquery/easing/

$.fallr('show', {
    easingDuration    : 1000,
    easingIn    : 'easeOutBounce',
    easingOut   : 'easeInElastic',
    icon        : 'window',
    position    : 'center',
    content     : '<h4>Animation please</h4><p>Oh pretty. Everyone loves animation.</p>'
}); 
                    

democode

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        : 'help',
    content     : '<p>Arsenal or Liverpool?</p>',
    buttons     : {
                    button1 : {text: 'Arsenal', onclick: function(){hide1('Arsenal');}},
                    button2 : {text: 'Liverpool', onclick: function(){hide1('Liverpool');}}
    },
}, function(){
    alert('Hi, this is a callback after show');
});
                    

democode

Custom size & On-the-fly Auto resize

var smaller = function(){
    $.fallr('resize', {width: '300px', height: '300px'});
};
var bigger = function(){
    $.fallr('resize', {width: '500px', height: '500px'});
};
$.fallr('show', {
    content : '<h4>Resize method</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."</p>',
    buttons : {
        button1 : {text: 'Smaller', onclick: smaller},
        button2 : {text: 'Bigger', onclick: bigger},
        button3 : {text: 'Cancel'}
    },
    width: '300px',
    height: '300px',
    position: 'center',
    icon: 'left'
}, function(){
    // on show callback
    $.fallr('resize', {width: '400px', height: '400px'});
});
                    

democode

Autoclose after 5 seconds

$.fallr('show', {
    buttons     : {},
    content     : '<h4>Autoclose</h4><p>This will be self closing after 5 seconds</p><p>No buttons haz teh present haha LOL so just wait plz</p>',
    autoclose   : 5000,
    icon        : 'clock'
});

democode

Special Effects: Blink, Shake

var blinkIt = function(){
    $.fallr('blink');
};
var shakeIt = function(){
    $.fallr('shake');
};

$.fallr('show', {
    content     : '<h4>Special Effects</h4>',
    position    : 'center',
    icon        : 'star',
    buttons     : {
        button1 : {text: 'Blink', onclick: blinkIt},
        button2 : {text: 'Shake', onclick: shakeIt},
        button3 : {text: 'Cancel'}    
    }
});

democode

Non-window boundary

// see that this box has an id="selector"
$.fallr('show', {
    content     : '<p>Set the boundary to any element. To this box for example</p>',
    icon        : 'pin',
    bound       : '#selector',
    useOverlay  : false
});	

democode