Modal

Creates new droppables on the nodeset supplied by the query. The following options can be applied to the modal behavior.

show modal | show modal 2 | show modal 3

<style>
	.box
	{
		border:1px solid #ccc;
		width:400px;
		height:40px;
		background-color:#eee;
		margin:10px;
		padding:10px;
	}
	.resize
	{
		background-color:#ffffcc !important;
	}
	.resize_border
	{
		border:1px solid #ff0000;
	}
</style>
 
<a on="click then l:modal" href="#">show modal</a> | 
<a on="click then l:modal2" href="#">show modal 2</a> |
<a on="click then l:modal3" href="#">show modal 3</a>
 
<div class="box" 
	behavior="modal[background-color=#336699,showEffect=fadeIn,hideEffect=explode]" 
		on="l:modal then show or l:close then hide">
	<div>Custom background and show/hide effects</div>
	<div on="click then l:close">close</div>
</div>
<div class="box" 
	behavior="modal[opacity=0]" 
		on="l:modal2 then show or l:close2 then hide">
		<div>Modal with opacity = 0</div>
	<div on="click then l:close2">close</div>
</div>
<div id="modal_api1" class="box">
	<div>API</div>
	<div on="click then l:close3">close</div>
</div>
<script>
	App.addBehavior('modal_api1','modal',{},function()
	{
		var el = swiss('#'+this.id).get(0)
		el.setAttribute('on','l:modal3 then show or l:close3 then hide');
		App.Compiler.dynamicCompile(el);
	});
</script>