Appcelerator titanium, как мне создать модальное окно?

Question

Я новичок в appcelerator titanium и у меня есть вопрос

как мне создать модальное окно, которое размывает родительский элемент, или имеет полупрозрачный фон? Мне удалось создать модальное окно, но родитель перешелчерный.

заранее спасибо

Answer 1

Это текущий способ сделать это в 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();
});

Теперь создайте свой стек пользовательского интерфейса. Порядок важен, чтобы избежать необходимости устанавливать 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

почему бы просто не дать ему прозрачный фон?

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

Answer 4

я тоже искал такое окно с полупрозрачным фоном для 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" за концепцию.

Answer 5

Мне нравится решение, представленное 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'
});

При этом вы можете «складывать» элементы графического интерфейса в этом представлении и не беспокоиться (слишком много) о настройке координат компоновки ... По крайней мере, это то, что я делаю при создании настраиваемого окна предупреждения с использованием методов, описанных здесь .

Answer 6

Если вы на iPhone, возможно, вы не сможете это сделать. на iPhone, если появляется модальное диалоговое окно, другое окно в стеке рендеринга будет очищено. То есть только ОДИН модальный диалог в стеке рендеринга. Вот почему вы получили черный цвет, если другие области родителя не закрыты вашим модальным окном. В iPad реализован модальный диалог в стиле «лист», поэтому вы можете сделать области полупрозрачными.

Answer 7

Вы можете попробовать использовать opacity в имеющемся окне, которое перекрывает другое.

Ti.UI.currentWindow.opacity = 0.4;

Answer 8

В Titanium Appcelerator (пробовал в 1.6.2) модальное окно всегда полноэкранное. Родитель может показаться черным, потому что фон этого модального окна черный.

Попробуйте указать полупрозрачное изображение в качестве фона этого модального окна, которое вы создаете, и вы можете получить желаемый эффект от него.