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

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

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

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

Note: Above code is tested with Android device.

Written By: Raju Mahato, Software Developer, Mindfire Solutions

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s