Question

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

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

提前致谢

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

Answer 2

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

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

Answer 3

在Titanium Appcelerator中（在1.6.2中尝试过），模态窗口始终是一个全屏窗口。父母可能看起来很黑，因为这个模态窗口的背景是黑色的。

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

Answer 4

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

Ti.UI.currentWindow.opacity = 0.4;

Answer 5

如果您使用iPhone，可能无法制作它。在iPhone上，如果出现模态对话框，将清除渲染堆栈上的另一个窗口。也就是说，渲染堆栈中只有一个模态对话框。如果你的模态窗口没有覆盖父母的其他区域，那么你就变黑了。 iPad使用＆＃34; sheet＆＃34;实现了模态对话框。风格，所以你可以使这些区域半透明。

Answer 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元素，而不必担心（太多）设置布局坐标......至少我在创建自定义警报框时使用此处概述的技术

Answer 7

我也在为ios 8.4寻找半透明背景的窗口。我试过了＃AlienWebguy＆＃34;在Alloy XMl中，问题是整个窗口获得不透明度0.5，并且背景堆叠窗口内容比前景视图内容清晰可见。我对＆＃34; AlienWebguy＆＃34;做了一些改变。得到所需的结果：

<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中的时间。感谢＆＃34; AlienWebguy＆＃34;这个概念。

Answer 8

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

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

Appcelerator钛，我该如何创建模态窗口？

8 个答案: