【发布时间】：2015-02-19 19:21:47
【问题描述】：
我正在尝试创建一个像这样的弹出窗口
用户按下一个按钮，就会出现一系列选项，我称之为弹出窗口。 与此同时，背景变成黑色透明。
过去几个小时我一直在网上试图找到一个很好的例子来说明如何实现这一点，但没有运气。 哦，是的，我想用合金来定义弹出窗口。
提前感谢您的帮助！
【问题讨论】：
标签： javascript popup titanium titanium-alloy
【发布时间】：2015-02-19 19:21:47
【问题描述】：
嘿@falcko 这是一个如何创建弹出窗口的例子 希望对您有所帮助
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);
}
);
【讨论】：
-
感谢您的出色回复和示例！效果很好！这是否也可以通过任何更改使用合金 xml 构建弹出窗口？
-
确实如此！它只是窗口、视图和标签（xml）与布局（tss）和一些控制器逻辑（js 中的事件侦听器）的组合。自行转换并将其作为 Tony 出色答案的替代答案发布。