does anyone know of a good script which is similar to lightbox in style except instead of an image it will show the content.
Basically what I am trying to do is place a chatroom on my site but instead of it being on a page the person will click ‘chatroom’ then the lightbox affect will show up where the screen goes dark in the back but instead of an image showing up the user will see their chat window.
I’ve seen it done before with just regular content and with flash videos.
Hey.
This is not hard to do using basic JavaScript. You just have JavaScript create new elements and add the to the DOM, and style them so they appear as a popup window.
For example, you create a simple HTML page, like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JS Popup Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>JS Popup Test</h1>
<p><a href="javascript:void(0);" id="PopupTrigger">Bring up the window</a></p>
</body>
</html>
This includes an external JavaScript file, test.js, which would contain the two functions we need to make this work.
First, we need a function that creates, configures and adds the elements of our window to the DOM.
/**
* Emulates a popup window in the document.
* @param title The title of the window.
* @param contentLink A link to the contents to be displayed in the window.
* @return void
*/
function createPopupWindow(title, contentLink)
{
// Create elements required
var backgroundShade = document.createElement('div');
var windowContainer = document.createElement('div');
var windowTitle = document.createElement('div');
var windowContent = document.createElement('iframe');
// Configure the backround "shade" effect.
backgroundShade.style.position = 'absolute';
backgroundShade.style.top = '0px';
backgroundShade.style.right = '0px';
backgroundShade.style.bottom = '0px';
backgroundShade.style.left = '0px';
backgroundShade.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
// Add an onclick handler to the background "shade" effect,
// so that when it is clicked the window dissapears.
backgroundShade.onclick = function() {
document.body.removeChild(windowContainer);
document.body.removeChild(backgroundShade);
}
document.body.appendChild(backgroundShade);
// Configure the window
windowContainer.style.position = 'absolute';
windowContainer.style.top = '10%';
windowContainer.style.right = '10%';
windowContainer.style.bottom = '10%';
windowContainer.style.left = '10%';
windowContainer.style.backgroundColor = 'rgba(255, 255, 255, 1)';
document.body.appendChild(windowContainer);
// Configre the window title bar.
windowTitle.style.height = '46px';
windowTitle.style.width = '100%';
windowTitle.style.padding = '2px 0 2px 0';
windowTitle.style.textIndent = '4px';
windowTitle.style.borderBottom = 'solid 1px #000000';
windowTitle.style.fontSize = '42px';
windowTitle.style.fontFamily = '"Trebuchet MS", Arial, sans';
windowTitle.innerHTML = title;
windowContainer.appendChild(windowTitle);
// Configure the window content.
windowContent.style.width = '100%';
windowContent.style.height = (windowContainer.offsetHeight - 50) + "px";
windowContent.style.overflow = 'auto';
windowContent.style.border = 'none';
windowContent.setAttribute('src', contentLink);
windowContainer.appendChild(windowContent);
}
This does all of the heavy-lifting. A call to this function from anywhere in the code will bring up a popup window that displays the URL passed in the second parameter. - It uses an <iframe>, but you could replace that with whatever you want. You could have the function create a much more complex structure of elements, and attach even handlers to them for your chatroom.
But, anyways, to complete this example, we add a window.onload handler, to tie the “PopupTrigger” link in the HTML to the createPopupWindow function.
window.onload = function()
{
var triggerLink = document.getElementById('PopupTrigger');
triggerLink.onclick = function() {
createPopupWindow('Test Window', 'http://yahoo.com/');
}
}
And that should be it. Put that all together and you will get a window that displays yahoo.com. You could replace that with an external HTML document that displays your chatroom. It’s the simplest way to do what you are asking for.
Note that the shaded background will not work in IE as it is there (it can’t handle rgba values yet) so you will have to figure out how to make it do opacity if you want IE to display this properly. (I can’t help you there. Don’t use Windows if I can avoid it 
)