Dynamic Floating window by javascript

Question

Hi Friends,

I want to build a dynamic floating window with close button at corner. Is it possible, and also i want to add some content dynamically into that window.

Please help me.. It should be in javascript.. Better without AJAX..

Thanks in Advance

Answer 1

My favourite has always been Scriptaculous, which lets you do all sorts of interesting visual things. The new kids on the block use jquery. One of these two should do the trick for you.

There are lots of samples on both sites that do what you want.

Answer 2

Sorry for just linking to a blog post, but i think it explains very well and straight forward.

http://jetlogs.org/2007/07/01/jquery-floating-dialog-windows/

This feature requires jQuery, former plugin and Interface elements.

You can achieve the wanted effect with just jQuery and Interface though. Please have a look at this link aswell.

http://interface.eyecon.ro/

Answer 3

Well at the most basic just create a div and inject content by setting innerHTML to an HTML string. Positioning it can be tricky since you have to worry about scrolling and different browsers have different means of controlling this. You may also want to position relative to some originating element in the page which you can do by digging the element and it's position out of the event object your javascript function receives when the originating element is clicked.

Google hover popup - first link is http://www.calcaria.net/javascript/2006/09/javascript-hover-over-html-popup.html

Answer 4

There are lots of different libraries out there for making windows. I have found that Livepipes has a very well rounded and customizable javascript library that includes a window control along with a variety of others. http://livepipe.net/control One that I haven't used but looks promising, is prototypeui. It is based on the prototype and scriptaculous javascript libraries. jqModal is another I have used that is based on JQuery.

Answer 5

What you are looking for is called a "lightbox" technique. Here is a comparison of many lightbox techniques.

Many exist out there on the web, here are some for jquery and prototype libs:

• Jquery: Thickbox, Lightbox Plugin

• Prototype: Lightbox 2, Leightbox

Also, check out the wikipedia article on lightbox.

Answer 6

jQuery UI has an awesome floating window. What's cool about the jQuery UI version is that you can also package it with the UI theme manager, which means less time styling.

Check it out here : jQuery UI Dialog examples

All it takes is creating a container (probably a div), and one line of code. Something like this:

<div id="example">I'm in a dialog!</div>
$("#example").dialog();

Here's the documentation: jQuery UI Dialog documentation