Windows, Modals, LightBoxes and Tooltips for Prototype.
Introduction
Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are included.
| Name | Options |
| Centered Window / Content on Page | className: 'simple_window', closeOnClick: true |
| Relative Window / Dynamic Content | position: 'relative', className: 'simple_window', closeOnClick: true |
| HoverBox | position: 'relative', offsetLeft: 75, width: 175, hover: true, className: 'tooltip' |
| Relative Window / Content from Ajax | offsetLeft: 150, position: 'relative', className: 'simple_window', closeOnClick: 'container' |
| Draggable / Styled Window One | window_factory() options |
| Draggable / Styled Window Two | window_factory() options |
| Modal Window | fade: true, overlayOpacity: 0.75, className: 'modal' |
| Tooltip | className: 'tooltip' |
Modal Windows
The subclass Control.Modal has the same syntax and signature as Control.Window. When the first modal is created, Control.Overlay will load, which attaches div#control_overlay to the document.body. You must style this element to create the intended visual effect. Only one modal can be open at a time. When one is opened, it will close all other modals.
LightBoxes
If the link attached to the window has a file name that has any of the following extensions: jpg, jpeg, gif, png, tif, tiff, Control.Window will automatically try to display the image inside the window once it is open. The Control.LightBox subclass has the same syntax and signature as Control.Window but delay the opening of the window until all of the images inside the window have loaded. This also applies this behavior to the response of any ajax call. You can pass in the modal option to make the LightBox act as a modal.
HoverBox & Tooltips
You can set the hover property to true to make any window behave as a hoverbox. Note that if the window completely overlaps the link that opened it, you won't be able to close the window in some browsers since the onmouseout even will no longer fire. Control.ToolTip is a subclass of Control.Window that has a syntax optimized for tooltips. The first parameter is the element that the tooltip will appear over, and the second parameter is the text of the tooltip. Options can still be passed as the last parameter.
Local, AJAX or iframe Modals
You can open a window with content that is already on the page, so long as it is contained in any element that has an id. You create this kind of link just as you would link to any other element id <a href="#my_container_name">. If you want to link to an AJAX call just specify the full URL in your link's href. To create an iframe, do the same and pass in the parameter {iframe: true}. Dynamic iframe creation is buggy on the browser level and should be avoided.
JavaScript
//Centered Window / Content on Page
var centered = new Control.Window($(document.body).down('[href=#centered]'),{
className: 'simple_window',
closeOnClick: true
});
//Relative Window / Dynamic Content
var relative = new Control.Window($(document.body).down('[href=#relative]'),{
position: 'relative',
className: 'simple_window',
closeOnClick: true
});
relative.container.insert('This content was inserted with JavaScript.');
//HoverBox
var relative = new Control.Window($(document.body).down('[href=#hoverbox]'),{
position: 'relative',
hover: true,
offsetLeft: 75,
width: 175,
className: 'tooltip'
});
//Relative Window / Content from Ajax
var ajax = new Control.Window($(document.body).down('[href=/ajax_example]'),{
className: 'simple_window',
closeOnClick: 'container',
offsetLeft: 150
});
//styled examples use the window factory for a shared set of behavior
var window_factory = function(container,options){
var window_header = new Element('div',{
className: 'window_header'
});
var window_title = new Element('div',{
className: 'window_title'
});
var window_close = new Element('div',{
className: 'window_close'
});
var window_contents = new Element('div',{
className: 'window_contents'
});
var w = new Control.Window(container,Object.extend({
className: 'window',
closeOnClick: window_close,
draggable: window_header,
insertRemoteContentAt: window_contents,
afterOpen: function(){
window_title.update(container.readAttribute('title'))
}
},options || {}));
w.container.insert(window_header);
window_header.insert(window_title);
window_header.insert(window_close);
w.container.insert(window_contents);
return w;
};
var styled_window_one = window_factory($('styled_window_one'));
var styled_window_two = window_factory($('styled_window_two'));
//Modal Window
var modal = new Control.Modal($('modal'),{
overlayOpacity: 0.75,
className: 'modal',
fade: true
});
//ToolTip
var tooltip = new Control.ToolTip($('tooltip'),'Windows can also act as tool tips.',{
className: 'tooltip'
});
CSS
#control_overlay {
background-color:#000;
}
.modal {
background-color:#fff;
padding:10px;
border:1px solid #333;
}
.tooltip {
border:1px solid #000;
background-color:#fff;
height:25px;
width:200px;
font-family:"Lucida Grande",Verdana;
font-size:10px;
color:#333;
}
.simple_window {
width:250px;
height:50px;
border:1px solid #000;
background-color:#fff;
padding:10px;
text-align:left;
font-family:"Lucida Grande",Verdana;
font-size:12px;
color:#333;
}
.window {
background-image:url("/stylesheets/window_background.png");
background-position:top left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding:10px;
font-family:"Lucida Grande",Verdana;
font-size:13px;
font-weight:bold;
color:#fff;
text-align:center;
min-width:150px;
min-height:100px;
}
.window .window_contents {
margin-top:10px;
width:100%;
height:100%;
}
.window .window_header {
text-align:center;
}
.window .window_title {
margin-top:-7px;
margin-bottom:7px;
font-size:11px;
cursor:move;
}
.window .window_close {
display:block;
position:absolute;
top:4px;
left:5px;
height:13px;
width:13px;
background-image:url("/stylesheets/window_close.gif");
cursor:pointer;
cursor:hand;
}
