app:modaldialog
  • Required Attributes (1)
  • Optional Attributes (2)
  • Examples (1)
  • Source code
Name Type Description Default value
on On Expression Used to show the modal dialog Not specified
Back to menuExample: Simple Example

This is a simple example that uses the <app:modaldialog>.

Click here for free Macallan and 2.5% more happiness
Request Denied I don't think so pal... Close Me
<a on="click then l:modaldialog1.test">Click here for free Macallan and 2.5% more happiness</a>
<div style="margin-top:10px">
	<img src="widgets/app_panel/doc/macallan.gif"/>
</div>
<app:modaldialog on="l:modaldialog1.test then execute">
	<html:table width="30%" align="center" class="my_modal_container">
		<html:tr>
			<html:td class="my_modal_header" align="left" valign="middle">
				<html:img src="cross.png"></html:img> Request Denied
			</html:td>
		</html:tr>
		<html:tr>
			<html:td class="my_modal_body" valign="middle" align="center">
				I don't think so pal...  
				<html:a on="click then l:appcelerator.modaldialog.hide">Close Me</html:a>							
			</html:td>
		</html:tr>				
	</html:table>
</app:modaldialog>
  1 /*
  2  * This file is part of Appcelerator.
  3  *
  4  * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved.
  5  * For more information, please visit http://www.appcelerator.org
  6  *
  7  * Appcelerator is free software: you can redistribute it and/or modify
  8  * it under the terms of the GNU General Public License as published by
  9  * the Free Software Foundation, either version 3 of the License, or
 10  * (at your option) any later version.
 11  *
 12  * This program is distributed in the hope that it will be useful,
 13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 15  * GNU General Public License for more details.
 16  * 
 17  * You should have received a copy of the GNU General Public License
 18  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 19  *
 20  */
 21 
 22 
 23 Appcelerator.Widget.Modaldialog =
 24 {
 25 	getName: function()
 26 	{
 27 		return 'appcelerator modaldialog';
 28 	},
 29 	getDescription: function()
 30 	{
 31 		return 'modaldialog widget';
 32 	},
 33 	getVersion: function()
 34 	{
 35 		return '1.0.1';
 36 	},
 37 	getSpecVersion: function()
 38 	{
 39 		return 1.0;
 40 	},
 41 	getAuthor: function()
 42 	{
 43 		return 'Jeff Haynie';
 44 	},
 45 	getModuleURL: function ()
 46 	{
 47 		return 'http://www.appcelerator.org';
 48 	},
 49 	isWidget: function ()
 50 	{
 51 		return true;
 52 	},
 53 	getWidgetName: function()
 54 	{
 55 		return 'app:modaldialog';
 56 	},
 57 	getActions: function()
 58 	{
 59 		return ['execute'];
 60 	},	
 61     getAttributes: function()
 62     {
 63         var T = Appcelerator.Types;
 64         return [{
 65             name: 'on',
 66             optional: false,
 67             type: T.onExpr,
 68             description: "Used to show the modal dialog"
 69         }, {
 70             name: 'property',
 71             optional: true,
 72             type: T.identifier,
 73 			description: 'Property of triggering message to use as namespace when'+
 74 	         ' template-replacing body on exxecute'
 75         }, {
 76             name: 'top',
 77             optional: true,
 78             type: T.number,
 79 			description: 'Something related to distance from the top of the page'
 80         }];
 81     },  
 82 
 83 	execute: function(id,parameterMap,data,scope)
 84 	{
 85 		var compiled = parameterMap['compiled'];
 86 		var propertyName = parameterMap['property'];
 87 		var array = null;
 88 		
 89 		if (!compiled)
 90 		{
 91 			compiled = eval(parameterMap['template'] + '; init_'+id);
 92 			parameterMap['compiled'] = compiled;
 93 		}
 94 		
 95 		if (propertyName)
 96 		{ 
 97 			array = Object.getNestedProperty(data,propertyName) || [];
 98 		}
 99 		
100 		var html = '';
101 		if (!array || array.length == 0)
102 		{
103 			html = compiled(data);
104 		}
105 		else
106 		{
107 			html = compiled(array[0]);
108 		}
109 		
110 		html = '<div scope="' + (scope || element.scope) + '">' + html + '</div>';
111 		
112 		var overlay = $('overlay');
113 		var overlaydata = $('overlay_data');
114 
115         Appcelerator.Compiler.destroyContent(overlaydata);
116 		overlaydata.innerHTML = html;
117 
118 		Appcelerator.Compiler.dynamicCompile(overlaydata);
119 		
120 		var arrayPageSize = Element.getDocumentSize();
121 		overlay.style.height = arrayPageSize[3] + 250 + 'px';
122 		Element.show(overlay);
123 
124 		var dataTop = 0;
125 		if (!parameterMap['top'])
126 		{
127 			var arrayPageScroll = Element.getPageScroll();
128 			var dataTop = Math.min(80,arrayPageScroll + (arrayPageSize[3] / 5));
129 			$D('modaldialog: dataTop='+dataTop+',arrayPageScroll='+arrayPageScroll+',arrayPageSize[3]='+arrayPageSize[3]);
130 		}
131 		else
132 		{
133 			dataTop = parseInt(parameterMap['top']);
134 		}
135 		overlaydata.style.top = dataTop + 'px';
136 		Element.show(overlaydata);
137 	},
138 	buildWidget: function(element,parameters,state)
139 	{
140 		var hidemessage = 'l:appcelerator.modaldialog.hide';
141 
142 		var overlay = $('overlay');
143 		if (!overlay)
144 		{
145 			var overlayHtml = '<div id="overlay" style="display: none" on="' + hidemessage + ' then hide" scope="*"></div>';
146 			new Insertion.Bottom(document.body, overlayHtml);
147 			overlay = $('overlay');
148 			overlay.modaldialog_compiled = 1;
149 			Appcelerator.Compiler.compileElement(overlay,state);
150 		}
151 		else
152 		{
153 			// allow overlay to be added in the doc but we attach to it
154 			if (!overlay.modaldialog_compiled)
155 			{
156 				overlay.setAttribute('scope','*');
157 				overlay.setAttribute('on',hidemessage+' then hide');
158 				Appcelerator.Compiler.compileElement(overlay,state);
159 				overlay.modaldialog_compiled = 1;
160 			}
161 		}
162 		
163 		var overlaydata = $('overlay_data');
164 		if (!overlaydata)
165 		{
166 			var overlayDataHtml = '<div on="' + hidemessage + ' then hide" class="overlay_data" id="overlay_data" style="display: none" scope="*"><