9
votes

Appelerator Titanium, comment puis-je créer une fenêtre modale?

Je suis nouveau à Appelerator Titanium et j'ai une question

Comment puis-je créer une fenêtre modale qui brouille son parent ou avoir un fond semi-transparent?, j'ai réussi à créer une fenêtre modale, mais le parent est allé noir.

Merci d'avance


0 commentaires

8 Réponses :


0
votes

dans le titane AppCelerator (essayé en 1.6.2) une fenêtre modale est toujours une fenêtre en plein écran. Le parent peut sembler noir car ce fond de cette fenêtre modale est noir.

Essayez de spécifier une image semi-transparente comme arrière-plan de cette fenêtre modale, vous créez et vous pourriez avoir l'effet que vous le souhaitez.


0 commentaires

0
votes

Vous pouvez essayer d'utiliser l'opacité code> sur la fenêtre que vous avez superposée à l'autre.

Ti.UI.currentWindow.opacity = 0.4;


0 commentaires

4
votes

Son très simple. Créez la fenêtre, et lorsque vous l'ouvrez, spécifiez la propriété «modale» comme true!

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


2 commentaires

Désolé j'ai oublié de mentionner ceci: Si vous voulez un arrière-plan flou, ne définissez pas une image de fond ou une couleur pour la fenêtre modale.


Cela ne le rend pas transparent ou flou, reste en arrière.



0
votes

Si vous êtes sur iPhone, vous ne pouvez probablement pas le faire. Sur iPhone, si une boîte de dialogue modale apparaît, l'autre fenêtre de la pile de rendu sera effacée. C'est-à-dire qu'une seule boîte de dialogue modale dans la pile de rendu. C'est la raison pour laquelle vous avez eu du noir si d'autres zones du parent ne sont pas couvertes par votre fenêtre modale. IPAD implémentée de la boîte de dialogue modale à l'aide de style "feuille", de sorte que vous puissiez faire les zones semi transparentes.


0 commentaires

10
votes

C'est la voie actuelle d'accomplir cela dans Titanium à partir de 3.1.3 sur iOS. strong>

Premièrement, faites une nouvelle fenêtre. P>

myModal.open({
    animate : true
});


3 commentaires

Excellent! Fonctionne bien!


Un problème que je suis confronté sur Android - si j'essaie une animation sur la fenêtre d'Android, elle commence toujours à partir du centre. Je veux une fenêtre modale pour animer de haut en bas. Comment puis-je atteindre cet objectif?


@Yahyuddin qui s'applique à la fenêtre elle-même qui prend en charge la vue complète du périphérique et a son propre fond opaque. L'OP demande plus d'un effet de la lumière de la lumière, qui ne peut pas être atteint avec modal: true



0
votes

J'aime la solution présentée par Alienwebguy, bien que je pense qu'il y a un bogue mineur. Lorsque vous créez votre étiquette, je pense que vous avez voulu définir la propriété code> texte code> et non le titre TITLE CODE> Propriété:

var containerView = Ti.UI.createView({
    height: 100, /* or whatever is appropriate */
    backgroundColor : '#FFF',
    layout: 'vertical'
});


0 commentaires

0
votes

Je cherchais également une telle fenêtre avec un fond semi-transparent pour iOS 8.4. J'ai essayé la façon dont "Alienwebguy" dans Alloy XML, mais le problème était la fenêtre entière de la fenêtre d'opacité 0,5 et la teneur en fenêtre empilée en arrière-plan est clairement visible que le contenu de la vue au premier plan. J'ai fait quelques modifications apportées à "Alienwebguy" pour obtenir le résultat requis:

<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>


0 commentaires

0
votes

Pourquoi ne pas simplement donner un fond transparent?

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


0 commentaires