appcelerator - Appcelerator titanium, comment puis-je créer une fenêtre modale?

10

C'est la manière de l'accomplir en Titane comme des 3.1.3 sur iOS.

Tout d'abord, faire une nouvelle fenêtre.
```
var myModal = Ti.UI.createWindow({
    title           : 'My Modal',
    backgroundColor : 'transparent'
});
```
Puis créer un wrapper de vue, un arrière-plan de la vue, et un conteneur de vue:
```
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();
});
```
Maintenant construire votre INTERFACE utilisateur de la pile. L'ordre est important pour éviter d'avoir à définir de z-index.
```
containerView.add(someLabel);
containerView.add(closeButton);

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

myModal.add(wrapperView);
```
Maintenant, vous pouvez ouvrir votre modal, mais de ne PAS mettre modal : true
```
myModal.open({
    animate : true
});
```
Excellente réponse!
Excellent! Fonctionne bien!
Un problème que je suis en face sur android - si j'essaie d'animation sur la fenêtre dans android, il commence toujours à partir du centre. Je veux une fenêtre modale pour animer du haut vers le bas. Comment puis-je y parvenir?
quoi de mal avec modal: true?
qui s'applique à la fenêtre elle-même qui prend sur l'ensemble de l'appareil vue et dispose de son propre arrière-plan qui est opaque. L'OP est de lui demander plus d'un effet lightbox, ce qui ne peut pas être réalisé avec modal:true

OriginalL'auteur AlienWebguy
4

Son très simple.Il suffit de créer la fenêtre, et quand on l'ouvre,spécifiez le 'modal' bien que vrai!
```
var ModalWindow = Ti.UI.createWindow({});
ModalWindow.open({modal:true}); 
```
désolé j'ai oublié de le mentionner: si vous voulez un arrière-plan flou ne mettez pas une image d'arrière-plan ou la couleur de la fenêtre modale.
qui ne marche pas qu'il soit transparent ou floue, des séjours en arrière.

OriginalL'auteur dragonfly
0

En Titanium Appcelerator (essayé en 1.6.2) une fenêtre modale est toujours une fenêtre plein écran. Le parent peut sembler noir parce que cette fenêtre modale de l'arrière-plan est noir.

Essayez de spécifier une image semi-transparente comme le fond de cette fenêtre modale, vous créez et vous risquez d'obtenir l'effet que vous voulez.

OriginalL'auteur Ozair Kafray
0

Vous pouvez essayer d'utiliser le opacity sur la fenêtre que vous avez qui est la superposition de l'autre.
```
Ti.UI.currentWindow.opacity = 0.4;
```
OriginalL'auteur bh88
0

Si vous êtes sur iPhone, probablement vous ne pouvez pas le faire. sur un iPhone, si une boîte de dialogue modale s'affiche, l'autre fenêtre sur le rendu de la pile sera effacé. C'est, seulement UNE boîte de dialogue modale dans le rendu de la pile. C'est la raison pour laquelle vous avez obtenu le noir, si d'autres domaines de la société mère ne sont pas couverts par votre fenêtre modale. iPad en œuvre de dialogue modale à l'aide de "feuille de style", de sorte que vous pouvez faire sont les zones semi-transparentes.

OriginalL'auteur Mason Zhang
0

J'aime la solution présentée par AlienWebguy, bien que je pense qu'il y a un bug mineur. Lorsque vous créez votre étiquette, je pense que vous vouliez dire à l'ensemble de la text bien, et non le title propriété:
```
var someLabel = Ti.UI.createLabel({
    text: 'Here is your modal',
    /* etc., etc. */
});
```
Lorsque j'ai utilisé title, il (l'étiquette) n'a pas été figurant dans la fenêtre.

Une autre modification que je pourrais faire est de définir la disposition du bien pour le conteneur de vue, par exemple,
```
var containerView = Ti.UI.createView({
    height: 100, /* or whatever is appropriate */
    backgroundColor : '#FFF',
    layout: 'vertical'
});
```
En faisant cela, vous pouvez "empiler" les éléments graphiques de ce point de vue et vous inquiétez pas (trop) sur la définition de mise en page les coordonnées... du moins c'est ce que je fais dans la création d'une alerte personnalisées boîte, en utilisant les techniques décrites ici.

OriginalL'auteur Jim Daehn
0

j'étais également à la recherche de la fenêtre semi arrière-plan transparent pour ios 8.4. J'ai essayé la voie "AlienWebguy" en Alliage XMl mais la question est toute la fenêtre de l'obtention de l'opacité de 0,5 et à l'arrière-plan empilés du contenu de la fenêtre sont clairement visibles de premier plan en visualiser le contenu. j'ai fait quelques modifications pour le "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>
```
Espère que cela permettra d'économiser le temps de développeur de le faire dans l'Alliage. Merci pour "AlienWebguy" pour le concept.

OriginalL'auteur Raghu

pourquoi ne pas tout simplement lui donner un fond transparent?

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

OriginalL'auteur aditya063

Vous devez vous connecter pour publier un commentaire.