Appcelerator钛,我该如何创建模态窗口?

mim*_*mim 8 window modal-dialog titanium appcelerator

我是appcelerator钛的新手,有一个问题

我怎样才能创建一个模糊其父级的模态窗口,或者具有半透明背景?我设法创建了一个模态窗口但是父级变黑了.

提前致谢

Ali*_*guy 10

这是在iOS上从3.1.3开始在Titanium中实现此目的的当前方法.

首先,打开一个新窗口.

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

然后创建包装器视图,背景视图和容器视图:

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();
});
Run Code Online (Sandbox Code Playgroud)

现在构建您的UI堆栈.顺序很重要,以避免必须设置z-index.

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

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

myModal.add(wrapperView);
Run Code Online (Sandbox Code Playgroud)

现在您可以打开您的模态,但不要设置 modal : true

myModal.open({
    animate : true
});
Run Code Online (Sandbox Code Playgroud)

  • 非常好的答案! (2认同)

Oza*_*ray 0

在 Titanium Appcelerator(在 1.6.2 中尝试过)中,模式窗口始终是全屏窗口。父级可能看起来是黑色的,因为该模式窗口的背景是黑色的。

尝试指定一个半透明图像作为您正在创建的模式窗口的背景,您可能会从中获得您想要的效果。