Appcelerator titanium, как мога да създам модален прозорец?

Това е текущият начин за постигане на това в 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-индекс.

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

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

myModal.add(wrapperView);

Сега можете да отворите вашия модал, но да НЕ задавате modal : true

myModal.open({
    animate : true
});

Много е просто. Просто създайте прозореца и когато го отваряте, посочете свойството 'modal' като true!

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

В Titanium Appcelerator (пробван във 1.6.2) модалният прозорец винаги е прозорец на цял екран. Родителят може да изглежда черен, защото фонът на този модален прозорец е черен.

Опитайте да посочите полупрозрачно изображение като фон на този модален прозорец, който създавате, и може да получите ефекта, който искате от него.

Можете да опитате да използвате opacity на прозореца, който имате, който се наслагва върху другия.

Ti.UI.currentWindow.opacity = 0.4;

Ако сте на iPhone, вероятно няма да успеете. на iPhone, ако се появи модален диалогов прозорец, другият прозорец от стека за изобразяване ще бъде изчистен. Тоест, само ЕДИН модален диалог в стека за изобразяване. Това е причината да получите черно, ако други области на родителя не са покрити от вашия модален прозорец. IPad внедри модален диалогов прозорец, използвайки стил "лист", така че можете да направите областите полупрозрачни.

Харесва ми решението, представено от 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 елементите в този изглед и да не се притеснявате (твърде много) за задаването на координатите на оформлението... Поне това е, което правя аз при създаването на персонализирано поле за предупреждение, използвайки техниките, описани тук.

Аз също търсех такъв прозорец с полупрозрачен фон за 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" за концепцията.

защо просто не му дадете прозрачен фон?

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