Modal popup in Titanium

Now a day it’s common to show messages in websites using modal popup. Here I have tried to make a custom modal window that can be used to show messages.

There will be button on a window, on click of which a modal popup will appear on screen and then if we click outside of the message view, the popup window will get closed.

//Define current window
var win = Ti.UI.currentWindow;

//define a button
var showPopupBtn = Ti.UI.createButton({
width    : 100,
height    : 50,
title    : ‘Show popup’
});

//Button added to the window
win.add(showPopupBtn);

//To show the popup window
showPopupBtn.addEventListener(‘click’, function(){
var modal = require(‘modalWindow’).modalWin;
var popupWin = new modal();
popupWin.open();
}) ;

In another file named ‘modalWindow.js’ where modal popup page UI is defined

//Function to show modal window
exports.modalWin = function(){

//Popup win
var popupWin = Ti.UI.createWindow({

backgroundColor : ‘black’,
opacity            : 0.5,
fullscreen        : true,
id                : ‘popupWin’
});

//View that used to show the msg
var popupView = Ti.UI.createView({
width    : 200,
height    : 100,
backgroundColor : ‘white’,
borderRadius : 5,
borderColor : ‘red’,
borderWidth : 3
});

//A message label is added to the view
popupView.add(Ti.UI.createLabel({ width : 150, height : ‘auto’, top : 10 ,
text : ‘This is Modal Window’, backgroundColor : ‘green’,
font  :  { fontSize : 14, fontWeight : ‘bold’}}));
popupWin.add(popupView);

//Event to close the popup window
popupWin.addEventListener(‘click’, function(e){
if(e.source.id != null){
popupWin.close();
}
});
return popupWin;
};

Note: Above code is tested with Android device.

Written By: Raju Mahato, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s