tableview.addEventListener('click',function(e)
{
    Ti.API.info("clicked on table view = "+e.source);
    var t = Titanium.UI.create2DMatrix();
    t = t.scale(0);

    var w = Titanium.UI.createWindow({
        backgroundColor:'#000',
        borderWidth:8,
        borderColor:'#888',
        height:400,
        width:300,
        borderRadius:10,
        opacity:0.9,
        transform:t
    });

    // create first transform to go beyond normal size
    var t1 = Titanium.UI.create2DMatrix();
    t1 = t1.scale(1.1);
    var a = Titanium.UI.createAnimation();
    a.transform = t1;
    a.duration = 200;

    // when this animation completes, scale to normal size
    a.addEventListener('complete', function()
    {
        Titanium.API.info('here in complete')
        var t2 = Titanium.UI.create2DMatrix();
        t2 = t2.scale(1.0);
        w.animate({transform:t2, duration:200});

    });

    // create a button to close window
    var b = Titanium.UI.createButton({
        backgroundImage: '../images/popup/modalClose1_1.png',
        backgroundSelectedImage: '../images/popup/modalClose1_2.png',
        top:5,
        lect: 5,
        height:33,
        width:74,
        font:{fontSize:20,fontWeight:'bold',fontFamily:'Helvetica Neue'}
    });

    w.add(b);
    b.addEventListener('click', function()
    {
        var t3 = Titanium.UI.create2DMatrix();
        t3 = t3.scale(0);
        w.close({transform:t3,duration:300});
    });

    w.open(a);
});


win.add(tableview);

10 Answers

• you can set the window background to transparent with opacity 1.0 and then add a view

  var view = Titanium.UI.createView({
  backgroundColor:'#000',
  opacity:0.9
  });
  and then add the button to the window with a big zIndex

  I hope this will help you

• I'm not sure I understand what you are trying to do? can you provide a link to a screenshot of what you want?

• I'm referring to this example in the kitchen sink application

  http://apple.7staging.com/modal.jpg

  When I set a background image for that button it inherits the opacity value of the window.

  How do I add textfields and buttons to that example that are not transparent.

• I'm trying to do the same thing.

  If you go to KitchenSink > Base UI > Window (Standalone) then click on Open (Animation Fun) you'll see that it opens a window with a transparent background, but with a non-transparent button inside.

  Setting the opacity on a window like this:

  var myWindow = Ti.UI.createWindow({
     backgroundColor:'#000', 
     width:320, 
     height:460, 
     opacity:0.60
  });
  

  …makes everything transparent, including all child elements. How are you getting the button in the KitchenSink example to not be transparent?

  ---

  The effect I'm after is to have a transparent overlay with a little box inside it, with the rest of the app still visible in the background (just like we do modals all over the web).

  Any ideas?

• I'm trying to do the same thing.

  If you go to KitchenSink > Base UI > Window (Standalone) then click on Open (Animation Fun) you'll see that it opens a window with a transparent background, but with a non-transparent button inside.

  Setting the opacity on a window like this:

  var myWindow = Ti.UI.createWindow({
     backgroundColor:'#000', 
     width:320, 
     height:460, 
     opacity:0.60
  });
  

  …makes everything transparent, including all child elements. How are you getting the button in the KitchenSink example to not be transparent?

  ---

  The effect I'm after is to have a transparent overlay with a little box inside it, with the rest of the app still visible in the background (just like we do modals all over the web).

  Any ideas?

• I'm trying to do the same thing.

  If you go to KitchenSink > Base UI > Window (Standalone) then click on Open (Animation Fun) you'll see that it opens a window with a transparent background, but with a non-transparent button inside.

  Setting the opacity on a window like this:

  var myWindow = Ti.UI.createWindow({
     backgroundColor:'#000', 
     width:320, 
     height:460, 
     opacity:0.60
  });
  

  …makes everything transparent, including all child elements. How are you getting the button in the KitchenSink example to not be transparent?

  ---

  The effect I'm after is to have a transparent overlay with a little box inside it, with the rest of the app still visible in the background (just like we do modals all over the web).

  Any help?

• I posted an answer to this and it looks like the forum choked on it. Good times.

  I'm trying to do the same thing. I want a transparent overlay to cover my app, then a fully opaque view to appear on top of that–just like we do modals all over the web.

  It turns out in the KitchenSink example (Base UI > Window (Standalone) > Open (Animation Fun)) that the "Close" button is transparent. It's just that the opacity is so subtle:

  opacity:0.92;
  

  If you change the opacity to something like 0.50, you'll see that everything in the window inherits the opacity setting.

  Nolan, our question is, how can we have a transparent window background without making everything inside our window transparent?

• I posted an answer to this and it looks like the forum choked on it. Good times.

  I'm trying to do the same thing. I want a transparent overlay to cover my app, then a fully opaque view to appear on top of that–just like we do modals all over the web.

  It turns out in the KitchenSink example (Base UI > Window (Standalone) > Open (Animation Fun)) that the "Close" button is transparent. It's just that the opacity is so subtle:

  opacity:0.92;
  

  If you change the opacity to something like 0.50, you'll see that everything in the window inherits the opacity setting.

  Nolan, our question is, how can we have a transparent window background without making everything inside our window transparent?

• Whoa… sorry for all the duplicates. It's not my fault–promise!

  So I found a solution for this. Just use two windows. Make one window your transparent background, then open another window right after that that has your stuff in it. Easy peasy.

• I was able to get the following to work so that anything I didn't want to have transparency I added to the win element; the win pops up as a small window and the winBG is the transparency behind it:

  var winBG = Titanium.UI.createWindow({
      backgroundColor:'#000',
      opacity:0.60
  });
  var win = Titanium.UI.createWindow({
      height:300,
      top:10,
      right:10,
      left:10,
      borderColor:'#FFF',
      borderWidth:3,
      backgroundColor:'#FF0000',
      borderRadius:3.0
  });
  winBG.open();
  win.open();
  

  I'm using Titanium Mobile 1.6.1 and Android 1.6.