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

Orchestral

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

Misguidance

Excellent! Works well! – Deplane

One problem I am facing on android - if I try any animation on window in android, it always starts from center. I want a modal window to animate from top to bottom. How can I achieve this? – Calces

@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 – Misguidance

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

Insatiable

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

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

Answer 3

In Titanium Appcelerator (tried in 1.6.2) a modal window is always a full screen window. The parent might seem black because this modal window's background is black.

Try specifying a semi-transparent image as the background of this modal window, you are creating and you might get the effect you want from it.

Jaundiced

Answer 4

You could try using the opacity on the window you have that is overlaying the other.

Ti.UI.currentWindow.opacity = 0.4;

Hollister

Answer 5

If you are on iPhone, probably you cannot make it. on iPhone, if a modal dialog appears, the other window on the render stack will be cleared. That is, only ONE modal dialog in the render stack. That's the reason you got black if other areas of the parent are not covered by your modal window. iPad implemented modal dialog using "sheet" style, so you can make the are areas semi transparent.

Stampede

Answer 6

I like the solution presented by AlienWebguy, although I think there's a minor bug. When you create your label, I think you meant to set the text property and not the title property:

var someLabel = Ti.UI.createLabel({
    text: 'Here is your modal',
    /* etc., etc. */
});

When I used title, it (the label) was not appearing in the window.

Another modification I might make is to set the layout property for the container view, e.g.,

var containerView = Ti.UI.createView({
    height: 100, /* or whatever is appropriate */
    backgroundColor : '#FFF',
    layout: 'vertical'
});

In doing this, you can "stack" up the GUI elements in that view and not worry (too much) about setting layout coordinates... At least that's what I do in creating a customized alert box using the techniques outlined here.

Drawn

Answer 7

i was also looking for such window with semi transparent background for ios 8.4. I tried the way "AlienWebguy" in Alloy XMl but the issue was whole window getting opacity 0.5 and background stacked window content are clearly visible than foreground view content. i have did some changes to the "AlienWebguy" to get the required result:

<Alloy>
     <Window backgroundColor="transparent" modal="false">
          <View layout="vertical" width="Ti.UI.FILL" height="Ti.UI.FILL" backgroundColor="#000" opacity="0.5">
                   // View will fill whole window with transparent shade of black color.
          </View>

          <View class="container" zIndex="100" height="400" width="Ti.UI.FILL" backgroundColor="#fff"> 
                  // You can add any content here, which will be look like Modal window.
                  //View automatically vertically centered on screen.
          </View>
     </Window>
</Alloy>

Hope this will save the time of developer doing in Alloy. Thanks for "AlienWebguy" for the concept.

Reynolds

Answer 8

why not just give it transparent background?

<Window backgroundColor="#80000000">
    <View class="container">
    // Your views
    </View>
</Window>

Florencio