在 Titanium 中创建弹出视图

Question

我正在尝试创建这样的弹出窗口

用户按下一个按钮，然后会出现一系列选项，我称之为弹出窗口。与此同时，背景变成黑色透明。

我花了最后几个小时在网上试图找到一个很好的例子来说明如何实现这一点，但没有运气。哦对了，我想用alloy来定义弹窗。

在此先感谢您的帮助！

Answer 1

嘿@falcko 这是如何创建弹出窗口的示例 window 希望这有帮助

   logout_view.addEventListener("click",function(){
  var t = Titanium.UI.create2DMatrix();
        t = t.scale(0);

        var w = Titanium.UI.createWindow({
            height:Ti.UI.FILL,
            width:Ti.UI.FILL,
            transform:t,
           backgroundColor:"transparent",
           // opacity:0.5
        });
         var v = Titanium.UI.createView({
            backgroundColor:'white',
           // height:"240dp",
            //width:"293dp",
            height:Ti.UI.FILL,
            width:Ti.UI.FILL,

           backgroundColor:"black",
           opacity:0.7
        });
       var popup=Ti.UI.createView({
           height:"240dp",
            width:"293dp",
            backgroundColor:"white",

       });
       var plz=Ti.UI.createLabel({
           text:"Please specify the reason for reporting",
           top:"21dp",
           width:Ti.UI.FILL,
           textAlign:"center",
           font : {
            fontFamily : customfont,
            fontSize : "16dp"
             },
           color:"#454545",

       });
       var check1=Ti.UI.createView({
           width:Ti.UI.SIZE,
           height:Ti.UI.SIZE,
           left:"16dp",
           top:"55dp"
       });
       var checkbox1=Ti.UI.createView({
           width:"8dp",
           height:"8dp",
           borderRadius:"4dp",
           borderColor:"#CBCBCB",
           borderWidth:"0.5dp",
           left:"0dpdp",

           selected:1
       });
       var serious=Ti.UI.createLabel({
           left:"20dp",
           text:"User wasn't serious",
           font : {
            fontFamily : customfont2,
            fontSize : "15dp"
             },
             //top:"53dp",
             color:"#666666"


       });
       check1.add(serious);
       check1.add(checkbox1);
      popup.add(check1);
        var check2=Ti.UI.createView({
           width:Ti.UI.SIZE,
           height:Ti.UI.SIZE,
           left:"16dp",
           top:"79dp"
       });
        var checkbox2=Ti.UI.createView({
           width:"8dp",
           height:"8dp",
           borderRadius:"4dp",
           borderColor:"#CBCBCB",
            borderWidth:"0.5dp",
           left:"0dp",

           selected:0
       });
         var rude=Ti.UI.createLabel({
           left:"20dp",
           text:"User was rude and abusive",
           font : {
            fontFamily : customfont2,
            fontSize : "15dp"
             },
             //top:"76dp",
             color:"#666666"


       });
       check2.add(rude);
        check2.add(checkbox2);
        popup.add(check2);
       var checkbox3=Ti.UI.createView({
           width:"8dp",
           height:"8dp",
           borderRadius:"4dp",
           borderColor:"#CBCBCB",
            borderWidth:"0.5dp",
           left:"16dp",
           top:"102dp",
           selected:0
       });
        var foul=Ti.UI.createLabel({
           left:"36dp",
           text:"User used foul language",
           font : {
            fontFamily : customfont2,
            fontSize : "15dp"
             },
             top:"100dp",
             color:"#666666"   
       });
       popup.add(foul);
       popup.add(checkbox3);

       var checkbox4=Ti.UI.createView({
           width:"8dp",
           height:"8dp",
           borderRadius:"4dp",
           borderColor:"#CBCBCB",
           left:"16dp",
            borderWidth:"0.5dp",
           top:"126dp",
           selected:0
       });
        var other=Ti.UI.createLabel({
           left:"36dp",
           text:"Other",
           font : {
            fontFamily : customfont2,
            fontSize : "15dp"
             },
             top:"123dp",
             color:"#666666"   
       });
       popup.add(other);
       popup.add(checkbox4);

         checkbox1.addEventListener("click",function(){
             if(checkbox1.selected==0){
          checkbox1.setBackgroundColor(o_color);
          checkbox1.selected=1; 
          checkbox2.setBackgroundColor("white");
          checkbox2.selected=0; 
          checkbox3.setBackgroundColor("white");
          checkbox3.selected=0; 
          checkbox4.setBackgroundColor("white");
          checkbox4.selected=0; 
          }
       });
        checkbox2.addEventListener("click",function(){
            if(checkbox2.selected==0){
          checkbox1.setBackgroundColor("white");
          checkbox1.selected=0; 
          checkbox2.setBackgroundColor(o_color);
          checkbox2.selected=1; 
          checkbox3.setBackgroundColor("white");
          checkbox3.selected=0; 
          checkbox4.setBackgroundColor("white");
          checkbox4.selected=0; 
          } 
       });
        checkbox3.addEventListener("click",function(){
           if(checkbox3.selected==0){
          checkbox1.setBackgroundColor("white");
          checkbox1.selected=0; 
          checkbox3.setBackgroundColor(o_color);
          checkbox3.selected=1; 
          checkbox2.setBackgroundColor("white");
          checkbox2.selected=0; 
          checkbox4.setBackgroundColor("white");
          checkbox4.selected=0; 
          } 
       });
        checkbox4.addEventListener("click",function(){
           if(checkbox4.selected==0){
          checkbox1.setBackgroundColor("white");
          checkbox1.selected=0; 
          checkbox4.setBackgroundColor(o_color);
          checkbox4.selected=1; 
          checkbox2.setBackgroundColor("white");
          checkbox2.selected=0; 
          checkbox3.setBackgroundColor("white");
          checkbox3.selected=0; 
          }  
       });
       popup.add(plz);
       var other_view=Ti.UI.createView({
           top:"154dp",
           left:"15dp",
           right:"15dp",
           height:"30dp",
           borderWidth:1,
           borderColor:"#C9C9C9"

       });
       var send=Ti.UI.createButton({
           title:"Send",
           height:"33dp",
           top:"197dp",
           color:"white",
           width:"102dp",
           backgroundColor:o_color,
               font : {
            fontFamily : customfont,
            fontSize : "13dp"
             },
       });
       popup.add(send);
       popup.add(other_view);

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

        });


        v.addEventListener('click', function()
        {
            var t3 = Titanium.UI.create2DMatrix();
            t3 = t3.scale(0);
            w.close();
        });
        w.add(v);
    w.add(popup);
        w.open(a);

}
);

在 Titanium 中创建弹出视图

Create view as popup in Titanium

javascript

popup

titanium

titanium-alloy