Appcelerator titanium, ¿cómo puedo crear una ventana modal?

Question

Soy nuevo en Acelerador titanium y tengo una pregunta

¿cómo puedo crear una ventana modal que desdibuja su elemento primario, o tiene un fondo semitransparente ?, logré crear una ventana modal pero el elemento primario se volvió negro.

gracias de antemano

Answer 1

En Appcelerator (juzgados en 1.6.2) una ventana modal es siempre una ventana de pantalla completa. El padre puede parecer negro porque el fondo de esta ventana modal es negro.

Intente especificar una imagen semitransparente como fondo de esta ventana modal, está creando y puede obtener el efecto que desea de ella.

Answer 2

Puede intentar usar el opacity en la ventana que tiene que se superpone a la otra.

Ti.UI.currentWindow.opacity = 0.4; 

Answer 3

Es muy simple.Just crear la ventana, y cuando estás abrirlo, especifique la propiedad 'modal' tan cierto!

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

Answer 4

Si está en iPhone, probablemente no pueda hacerlo. en iPhone, si aparece un cuadro de diálogo modal, se borrará la otra ventana en la pila de renderizado. Es decir, solo UN diálogo modal en la pila de renderizado. Esa es la razón por la que se puso negro si otras áreas del padre no están cubiertas por su ventana modal. iPad implementó un diálogo modal usando el estilo "hoja", por lo que puede hacer que las áreas sean semi transparentes.

Answer 5

Esta es la forma actual de lograr esto en Titanium desde 3.1.3 en iOS.

Primero, realice una nueva ventana.

var myModal = Ti.UI.createWindow({ 
    title   : 'My Modal', 
    backgroundColor : 'transparent' 
}); 

A continuación, cree una vista envoltorio, una vista de fondo, y una vista de contenedor:

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

Ahora construir su pila de interfaz de usuario. El orden es importante para evitar tener que establecer z-index.

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

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

myModal.add(wrapperView); 

Ahora puede abrir sus modales, pero no fijar modal : true

myModal.open({ 
    animate : true 
}); 

Answer 6

me gusta la solución presentada por AlienWebguy, aunque creo que hay un error menor. Cuando se crea la etiqueta, creo que quería decir para establecer la propiedad text y no la propiedad title:

var someLabel = Ti.UI.createLabel({ 
    text: 'Here is your modal', 
    /* etc., etc. */ 
}); 

Cuando solía title, ella (la etiqueta) no aparecía en la ventana.

Otra modificación que podría hacer es establecer la propiedad de diseño para la vista recipiente, por ejemplo,

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

Al hacer esto, puede "pila" los elementos de la GUI en ese punto de vista y no preocuparse (demasiado mucho) sobre la configuración de coordenadas de diseño ... Al menos eso es lo que hago al crear un cuadro de alerta personalizado utilizando las técnicas que se describen aquí.

Answer 7

También estaba buscando esa ventana con fondo semitransparente para iOS 8.4. Intenté el modo "AlienWebguy" en Alloy XMl pero el problema fue que toda la ventana obtuvo opacidad 0.5 y el contenido de la ventana apilada en segundo plano es claramente visible que el contenido de la vista en primer plano. he hizo algunos cambios en el "AlienWebguy" para obtener el resultado requerido:

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

Hope esto ahorrará el tiempo de desarrollador haciendo en la aleación. Gracias por "AlienWebguy" por el concepto.

Answer 8

¿por qué no solo le damos el fondo transparente?

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