Appcelerator Titanium，如何创建一个模态窗口？

Question

Appcelerator Titanium，如何创建一个模态窗口？

windowmodal-dialogtitaniumappcelerator

9

我刚开始使用Appcelerator Titanium，有一个问题：

我该如何创建一个模态窗口，使其模糊其父级元素，或者具有半透明的背景？我成功地创建了一个模态窗口，但是父级元素变成了黑色。

谢谢您提前的帮助！

- mim

8个回答

4

非常简单。只需创建窗口，并在打开窗口时将'modal'属性指定为true！

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

- dragonfly

抱歉，我忘了提醒：如果您想要模糊的背景，请不要为模态窗口设置背景图像或颜色。 - dragonfly

1

这并不会使其透明或模糊，它会保持在后面。 - Yozef

0

在Titanium Appcelerator中（尝试过1.6.2版本），模态窗口始终是全屏窗口。由于该模态窗口的背景是黑色的，所以父窗口可能看起来是黑色的。

尝试将半透明图像指定为您创建的此模态窗口的背景，您可能会从中获得所需的效果。

- Ozair Kafray

0

你可以尝试在覆盖其他窗口的窗口上使用 opacity。

Ti.UI.currentWindow.opacity = 0.4;

- rivenate247

0

如果您使用 iPhone，可能无法完成此操作。在 iPhone 上，如果出现模态对话框，则渲染堆栈上的其他窗口将被清除。也就是说，在渲染堆栈中只有一个模态对话框。这就是为什么如果父级的其他区域未被模态窗口覆盖，则会得到黑色的原因。iPad 使用“工作表”样式实现模态对话框，因此您可以使区域半透明。

- Mason Zhang

0

我喜欢AlienWebguy提出的解决方案，尽管我认为有一个小bug。当你创建标签时，我认为你想设置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元素，而不必太担心设置布局坐标...至少这就是我使用此处概述的技术创建自定义警报框时所做的。

- Jim Daehn

0

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

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

- aditya063

0

我也在寻找半透明背景的iOS 8.4窗口。我尝试了"AlienWebguy"在Alloy XMl中的方法，但是问题是整个窗口都变成了不透明度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”提出的概念。

- Raghu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AlienWebguy · Accepted Answer

这是截至 Titanium 3.1.3 版本在 iOS 上实现此功能的当前方法。

首先，创建一个新窗口。

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