appcelerator - Appcelerator Titan, wie kann ich erstellen ein modales Fenster?

10

Dies ist die aktuelle Art und Weise, dies zu erreichen in Titan-wie von 3.1.3 auf iOS.

Machen Sie sich zunächst ein neues Fenster.
```
var myModal = Ti.UI.createWindow({
    title           : 'My Modal',
    backgroundColor : 'transparent'
});
```
Dann erstellen Sie eine wrapper-Ansicht einen hintergrund anzeigen, und eine container-Ansicht:
```
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();
});
```
Nun bauen Sie Ihre UI-stack. Die Reihenfolge ist wichtig, um zu vermeiden, dass zum festlegen der z-index.
```
containerView.add(someLabel);
containerView.add(closeButton);

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

myModal.add(wrapperView);
```
Öffnen Sie nun Ihr modal, aber NICHT modal : true
```
myModal.open({
    animate : true
});
```
- Die perfekte Antwort!
- Ausgezeichnet! Funktioniert gut!
- Ein problem, das ich mich vor auf android - wenn ich versuchen, jede animation ein Fenster in android, es startet immer von der Mitte. Ich will ein modales Fenster zum animieren von oben nach unten. Wie kann ich das erreichen?
- was ist Los mit modal: true?
- das gilt für das Fenster selbst, das übernimmt die volle Geräte-Ansicht und hat seinen eigenen hintergrund, die undurchsichtig ist. Die OP ist für weitere Fragen der lightbox-Effekt, der nicht erreicht werden kann mit modal:true
InformationsquelleAutor AlienWebguy
4

Seine sehr einfach.Erstellen Sie einfach die Fenster, und wenn Sie es öffnen,geben Sie den 'modal' - Eigenschaft als wahr!
```
var ModalWindow = Ti.UI.createWindow({});
ModalWindow.open({modal:true}); 
```
- sorry vergaß zu erwähnen: wenn Sie möchten, dass ein unscharfer hintergrund dont legen Sie ein Hintergrundbild oder Farbe für das modal-Fenster.
- dass nicht ganz transparent oder verschwommen ist, bleibt zurück.
InformationsquelleAutor dragonfly
0

In Titanium Appcelerator (versucht in 1.6.2) wird ein modales Fenster ist immer Vollbild Fenster. Die Eltern scheinen mag schwarz, weil diese modalen Fenster-hintergrund ist schwarz.

Versuchen Sie, ein semi-transparentes Bild als hintergrund dieses modale Fenster, die Sie erstellen, und Sie erhalten möglicherweise den Effekt, den Sie von ihm wollen.

InformationsquelleAutor Ozair Kafray
0

Sie könnten versuchen, mit der opacity auf das Fenster, das Sie haben, dass ist die überlagerung der anderen.
```
Ti.UI.currentWindow.opacity = 0.4;
```
InformationsquelleAutor bh88
0

Wenn Sie auf dem iPhone, wahrscheinlich kann man nicht machen. auf dem iPhone, wenn ein modales Dialogfeld angezeigt, das andere Fenster auf die render-stack wird gelöscht. Das heißt, nur EIN modales Dialogfeld in der render-stack. Das ist der Grund, Sie haben schwarze, wenn andere Bereiche der Eltern nicht abgedeckt werden, durch Ihre modale Fenster. iPad umgesetzt Modaler dialog mit "Blatt" - Stil, so können Sie die Bereiche halb transparent.

InformationsquelleAutor Mason Zhang
0

Ich mag die Vorgestellte Lösung durch AlienWebguy, obwohl ich denke, es ist ein minor bug. Wenn Sie beim erstellen Ihres Etiketts, ich denken Sie, soll das text - Eigenschaft und nicht die title Eigenschaft:
```
var someLabel = Ti.UI.createLabel({
    text: 'Here is your modal',
    /* etc., etc. */
});
```
Wenn ich title es (das label) war nicht in dem erscheinenden Fenster.

Andere änderung, die ich machen könnte, ist, setzen Sie die layout-Eigenschaft des container-Ansicht, z.B.,
```
var containerView = Ti.UI.createView({
    height: 100, /* or whatever is appropriate */
    backgroundColor : '#FFF',
    layout: 'vertical'
});
```
In dies zu tun, können Sie "stapeln", bis der GUI-Elemente in dieser Ansicht und keine Sorge (zu viel) über die Einstellung layout-Koordinaten... zumindest das ist, was ich in das erstellen eines individuellen alert-box mit den Techniken hier beschrieben.

InformationsquelleAutor Jim Daehn

war ich auch auf der Suche nach solchen Fenster mit semi-transparenten hintergrund für ios 8.4. Ich habe versucht, die Art und Weise "AlienWebguy" in der Legierung XMl aber das Problem wurde ganze Fenster immer Deckkraft 0,5 und hintergrund, gestapelt, Fenster-Inhalte sind deutlich sichtbar als in den Vordergrund, Inhalte anzuzeigen. ich habe einige änderungen an der "AlienWebguy", um das gewünschte Ergebnis:

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

Hoffe, das spart die Zeit der Entwickler zu tun in der Legierung. Vielen Dank für die "AlienWebguy" für das Konzept.

InformationsquelleAutor Raghu

warum nicht einfach geben, es transparenten hintergrund?

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

InformationsquelleAutor aditya063

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.