Appcelerator Titanium，如何创建模态窗口？答案

【问题标题】：Appcelerator titanium, how can I create a modal window?Appcelerator Titanium，如何创建模态窗口？
【发布时间】：2011-09-08 17:14:46
【问题描述】：

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

如何创建模糊其父级或具有半透明背景的模态窗口？，我设法创建了一个模态窗口，但父级变黑了。

提前致谢

【问题讨论】：

标签： window modal-dialog titanium appcelerator

【解决方案1】：

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

首先，新建一个窗口。

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

然后创建一个包装视图、一个背景视图和一个容器视图：

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

现在构建您的 UI 堆栈。顺序对于避免设置 z-index 很重要。

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

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

myModal.add(wrapperView);

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

myModal.open({
    animate : true
});

【讨论】：

太棒了！效果很好！
我在 android 上面临的一个问题 - 如果我在 android 的窗口上尝试任何动画，它总是从中心开始。我想要一个模态窗口从上到下设置动画。我怎样才能做到这一点？
@YahyaUddin 应用于窗口本身，它接管了整个设备视图并有自己的不透明背景。 OP 要求更多的灯箱效果，modal:true 无法实现

【解决方案2】：

很简单。只需创建窗口，当你打开它时，将'modal'属性指定为true！

var ModalWindow = Ti.UI.createWindow({});
ModalWindow.open({modal:true});

【讨论】：

抱歉忘了提这个：如果你想要一个模糊的背景，不要为模态窗口设置背景图像或颜色。
不会使其透明或模糊的，保留在后面。

【解决方案3】：

在 Titanium Appcelerator（在 1.6.2 中试用）中，模式窗口始终是全屏窗口。父级可能看起来是黑色的，因为此模式窗口的背景是黑色的。

尝试指定一个半透明的图像作为这个模态窗口的背景，你正在创建，你可能会得到你想要的效果。

【讨论】：

【解决方案4】：

您可以尝试在覆盖另一个窗口的窗口上使用opacity。

Ti.UI.currentWindow.opacity = 0.4;

【讨论】：

【解决方案5】：

如果你在 iPhone 上，可能你做不到。在 iPhone 上，如果出现模态对话框，渲染堆栈上的另一个窗口将被清除。也就是说，渲染堆栈中只有一个模式对话框。如果您的模态窗口未覆盖父级的其他区域，这就是您变黑的原因。 iPad 使用“表格”样式实现了模态对话框，因此您可以将区域设置为半透明。

【讨论】：

【解决方案6】：

我喜欢 AlienWebguy 提出的解决方案，尽管我认为存在一个小错误。当您创建标签时，我认为您的意思是设置 text 属性而不是 title 属性：

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

当我使用title 时，它（标签）没有出现在窗口中。

我可能做的另一个修改是为容器视图设置布局属性，例如，

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

在这样做时，您可以“堆叠”该视图中的 GUI 元素，而不必（过多）担心设置布局坐标...至少这是我在使用此处概述的技术创建自定义警报框时所做的.

【讨论】：

【解决方案7】：

我也在为 ios 8.4 寻找具有半透明背景的窗口。我在 Alloy XMl 中尝试了“AlienWebguy”的方式，但问题是整个窗口的不透明度为 0.5，并且背景堆叠的窗口内容比前景视图内容清晰可见。我对“AlienWebguy”做了一些更改以获得所需的结果：

<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>

希望这将节省开发人员在 Alloy 中工作的时间。感谢“AlienWebguy”的概念。

【讨论】：

【解决方案8】：

为什么不给它透明背景呢？

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

【讨论】：