Built-in Popup Modal

Question

Is there any built-in support for modals in Famous?

I completed the Famous University and looked through the documentation but didn't see anything.

I am about to roll my own, but I figured I should ask first.

Answer 1

You are going to want to use the Lightbox object. Lightbox is like a RenderController that has state. This means you can define, how views come in an out of view both by transition and transform. Here is a very basic example of the modal type you see often in iOS..

Hope it helps!

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var Transform       = require('famous/core/Transform');
var Modifier        = require('famous/core/Modifier');

var Lightbox        = require('famous/views/Lightbox');
var Easing          = require('famous/transitions/Easing');

var context = Engine.createContext();

var surface = new Surface({
    size:[200,200],
    properties:{
        backgroundColor:'green',
        color:'white',
        lineHeight:'200px',
        textAlign:'center'
    }
});

surface.on('click',function(){ openModal() });

context.add(new Modifier({origin:[0.5,0.5]})).add(surface);

var modal = new Surface({
    size:[500,500],
    properties:{
        backgroundColor:'red'
    }
})

modal.on('click',function(){ hideModal() });

modal.lightbox = new Lightbox({
    inTransform: Transform.translate(0,500,0),
    outTransform: Transform.translate(0,500,0),
    inTransition: {duration:1000, curve:Easing.outElastic},
    outTransition: {duration:200, curve:Easing.inOutQuad},
});

context.add(new Modifier({origin:[0.5,0.5]})).add(modal.lightbox);


function openModal(){
    modal.lightbox.show(modal);
}

function hideModal(){
    modal.lightbox.hide();
}