Appcelerator titanium, how can I create a modal window?

Question

I am new to appcelerator titanium and have a question

how can I create a modal window that blurs its parent, or have a semi transparent background?, I managed to create a modal window but the parent went black.

thanks in advance

Solution 1

This is the current way to accomplish this in Titanium as of 3.1.3 on iOS.

First, make a new window.

var myModal = Ti.UI.createWindow({
    title           : 'My Modal',
    backgroundColor : 'transparent'
});

Then create a wrapper view, a background view, and a container view:

var wrapperView    = Ti.UI.createView(); // Full screen
var backgroundView = Ti.UI.createView({  // Also full screen
    backgroundColor : '#000',
    opacity         : 0.5
});
var containerView  = Ti.UI.createView({  // Set height appropriately
    height          : 300,
    backgroundColor : '#FFF'
});
var someLabel      = Ti.UI.createLabel({
    title : 'Here is your modal',
    top   : 40
});
var closeButton    = Ti.UI.createButton({
    title  : 'Close',
    bottom : 40
});
closeButton.addEventListener('click', function () {
    myModal.close();
});

Now build your UI stack. The order is important to avoid having to set z-index.

containerView.add(someLabel);
containerView.add(closeButton);

wrapperView.add(backgroundView);
wrapperView.add(containerView);

myModal.add(wrapperView);

Now you can open your modal, but to NOT set modal : true

myModal.open({
    animate : true
});

Solution 2

Its very simple.Just create the window, and when you're opening it,specify the 'modal' property as true!

var ModalWindow = Ti.UI.createWindow({});
ModalWindow.open({modal:true}); 

Comments

[dragonfly]

sorry forgot to mention this: if you want a blurred background dont set a background image or color for the modal window.

[Yozef]

that dosen't make it transparent or blurred, stays back.

[AlienWebguy]

@YahyaUddin that applies to the window itself which takes over the full device view and has its own background which is opaque. The OP is asking for more of a lightbox effect, which can't be achieved with modal:true