This is an example of how to do a Lightbox style modal window (a View posting as a Window) in a Titanium 2.x SDK iOS app.
Why bother?
Sometimes it’s useful for in app messaging, when you want to avoid opening an actual Window via Ti.UI.createWindow and stay in the same execution context as recommended by the best practices section of Titanium docs. You can also use this approach when the look & feel of the default iOS alert window just isn’t your style.
Sample usage
Here’s how you’d use it:
var FakeModalWindow = require('/ui/FakeModalWindow'); var someText = "OK, some new text. Blah Blah Blah Blah Blah . \n\nThis new one here. \n\nYou new copy. \n\n Some More stuff and stuff.."; var fmw = new FakeModalWindow(); self.add(fmw); //to change the copy in the fmw's TextArea: fmw.fireEvent('setCopy_fake_modal_win', {newCopy:someText}); self.addEventListener('close_fake_modal_win', function(e){ fmw.hide(); }); self.addEventListener('open_fake_modal_win', function(e){ fmw.show(); });
Source
Here’s the actual FakeModalWindow.js module code:
module.exports = function FakeModalWindow() { var theCopy = "Lorem Headline" + "\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "+ "\n\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " + "\n\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." + "\n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "; } // some variables we'll need var OS = Ti.Platform.osname; var SLASH = Ti.Filesystem.separator; var imgPath = SLASH + 'images'; //create component instance var self = Ti.UI.createView({ width: Ti.UI.FILL, height: Ti.UI.FILL, backgroundColor:'#65000000', zIndex : '50', }) /** * Main container w/ white background & rounded corners */ var content_win = Ti.UI.createView({ backgroundColor:'#ffffff', layout: 'vertical', width: (OS==='ipad') ? '542dip' : '270dip', //'542dip', // height: Ti.UI.SIZE, //'526dip' (OS==='ipad') ? '526dip' : '15dip', borderRadius: (OS==='ipad') ? 6 : 2 }); /** * Horizontal container 1 */ var title_bar = Ti.UI.createView({ layout: 'horizontal', height: Ti.UI.SIZE, //borderColor: '#FF00FF', //borderWidth: 1 }); /** * Horizontal container 2 */ var content_bar = Ti.UI.createView({ layout: 'horizontal', height: Ti.UI.SIZE, //borderColor: '#FF0000', //borderWidth: 1 }); /** * Horizontal container 3 */ var footer_bar = Ti.UI.createView({ layout: 'horizontal', height: (OS==='ipad') ? '20dip' : '10dip', //borderColor: '#FF0000', //borderWidth: 1 }); /** * Begin content pieces */ var orange_bar = Ti.UI.createView({ backgroundColor: '#f37416', width: Ti.UI.FILL, height: (OS==='ipad') ? '57dip' : '26dip', borderRadius: (OS==='ipad') ? 6 : 2, borderColor: '#white', borderWidth: (OS==='ipad') ? 5 : 2, }); var close_button = Ti.UI.createView({ backgroundImage: '/images/shared/btn_close.png', left: (OS==='ipad') ? '485dip' : '5dip', width: (OS==='ipad') ? '37dip' : '18dip', height: (OS==='ipad') ? '37dip' : '18dip' }); var body_copy = Ti.UI.createTextArea({ //borderWidth: 2, //borderColor: '#CCFF33', value: theCopy, editable: false, textAlign: 'left', top: (OS==='ipad') ? '15dip' : '7dip', left: (OS==='ipad') ? '20dip' : '10dip', color: '#000000', font: { fontSize: (OS==='ipad') ?'20dip' : '12dip' }, width: Ti.UI.FILL, height: Ti.UI.SIZE }); content_win.updateLayout({height:Ti.UI.SIZE}); orange_bar.add(close_button); title_bar.add(orange_bar); content_bar.add(body_copy); contentWin.add(title_bar); contentWin.add(content_bar); contentWin.add(footer_bar); self.add(content_win); /** * Event listeners */ self.addEventListener('setCopy_fake_modal_win', function(e){ body_copy.setValue(e.newCopy); body_copy.updateLayout( {height: Ti.UI.SIZE } ); }); self.addEventListener('click', function(e){ // if the user interacts anywhere, close the modal window self.fireEvent('close_fake_modal_win'); }); return self; }