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

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

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

Answer 4

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

Ti.UI.currentWindow.opacity = 0.4;

Answer 5

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

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

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

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

Answer 7

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

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