Examples

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

demo

# Coming from below


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

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

# Unobtrusive Without Overlay

$.fallr.show({
    content     : '<p>Yay, no overlay!</p>',
    icon        : 'quote',
    useOverlay  : false
});

demo

# Embed iframe

$.fallr.show({
    content     : '<p>This is a video</p>'
                  + '<iframe width="560" height="315" src="http://www.youtube.com/embed/-ubMdTHfxko" frameborder="0" allow="autoplay; encrypted-media></iframe>',
    width       : 560 + 100, // 100 = padding width
    icon        : 'chat',
    buttons     : {
        button1 : {text: 'Close'}    
    }
});

demo

# Non-window boundary

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

demo

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

demo

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

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

demo

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

demo

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

demo

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

demo

# Etc. (will be added later)
See more: https://github.com/faisalman/fallr-js