Harrisdev.net

PopIt

PopIt is a dynamically generated, draggable, resizable popup window that has many custom options.
It was built using prototype and web programming standards in mind so that there is cleaner code and easily managable.

You can download the script from the git repository here: http://github.com/mharris/Popit/tree/master
simple PopIt
this is the simplist PopIt possible, just simply pass it the text that you want to see in the window
it is draggable around the screen
has minimize, maximize and close buttons
has resizable borders
and is automatically centered on the screen 
new PopIt('simple PopIt');
Select a theme for all of the windows below
Open Larger Window
for a slightly more clomplicated PopIt we supply a lot more text
width and height information to make it a bit bigger
a title
and set the status text
var PopIt = new PopIt($('lorem').innerHTML, 
{
	title: 'Lorem ipsum',
	height: 400,
	width: 600
});
PopIt.updateStatusText("lorem ipsum");
Open Model Window
this one is a slight modification of the previous example
we make it just a bit smaller
make it a modal dialog so that only one PopIt can be opened at a time and it must be closed before working with the document
turn off dragging and resizing functionality 
var PopIt = new PopIt($('lorem').innerHTML, 
{
	title: 'Lorem ipsum',
	height: 200,
	width: 300,
	isModal: true,
	isDraggable: false,
	isResizable: false
});

PopIt.updateStatusText("lorem ipsum");
Open Custom url
with this final example we supply the content as a url.
you then have to set isUrl = true
this causes the content to load in an iframe
be warned that standard issues with iframes exist such as events not bubbling to the parent window 
new PopIt(url, 
{
	isUrl: true
});
here is a list of all of the options available along with their default values
title = ' '; //the window title
height = 150; //the height of the PopIt
width = 200; // the width of the PopIt
shimOpacity = 0.9; // the opacity to use for the various cover divs
isModal = false; // if he window is a modal dialog or not
isDraggable  = true; // if dragging is enabled
isResizable = true; // if resizing is enabled
isMinimizable = true; // if minimize functions are enabled
isMaximizable = true; // if maximize functions are enabled
isClosable = true; // if closing functions are enabled
escapeClosesPopIt = true; // if pressing the escape key closes all PopIts
isUrl = false; // if content type is a url and an iframe should be used
offsetTop = 20; //the amount of px to add to the top of the PopIt
effectDuration = 0.5; // the duration of the various effects that happen with the PopIt
this.className = ""; //the base classname to use for the PopIt
Alert PopIt
this is a simple popit with beforeClose and afterClose alerts 
new PopIt('simple PopIt', 
{
	beforeShow: function()
	{
		alert('beforeShow');
	},
	afterShow: function()
	{
		alert('afterShow');
	},
	beforeClose: function()
	{ 
		alert('beforeClose');
	}, 
	afterClose: function()
	{
		alert('afterClose');
	}
});
Additional Close PopIt
this is a popit with additional close buttons inside the popit. It is important to note that when using the id field you cannot have another element on the page with the same id. 
var popIt = new PopIt('', 
{
	id: 'myPopit'
});
to close the popit you simply need to: 
popIts.activePopIts['myPopit'].close();
to close all popits you simply need to: 
popIts.closeAll();