The post title summarises my query - how do I create pop-up windows that are embedded inside a page?

Broadly, there are two kinds of JavaScript pop-ups.. one is that ultra annoying one, which pops out a new instance of a browser window and displays something there (usually an ad) - made infamous by all the warez and porn sites.

Second one, which has come to be quite well-known of late is the kind you see in recent versions of WordPress (in the Visual Editor) as well as LightBox based galleries. Here a small window (or rather a div) pops-up embedded in the middle of the page. It's a floating div that can be dragged around anywhere. A similar notification window can be sighted even in the recent versions of IPB when you receive a new PM. This is exactly what I want to create - but I dont have no clue how to go about it.

I tried searching for "embedded" "pop-up" etc. but always got tutorials for silly JS popup windows...

Can anyone help shed light on this? And don't ask me to study the lightbox code - I already did. But my JS is so pathetic I couldn't do much with it. If you can point me to a good tutorial that shows you how to do this it'll be great

Cheers,
m^e

 

 

 

Reply

My efforts had gone in vain as well. I first noticed those in the Konetera powered in-text ads. I tried to get some hold on their cryptic codes but wasn't successful, more so because of the frustration the process involves.
Dropping the philosophical note, I would give it one more try. I'll keep you updated on the progress.

Reply

One thing I can't understand, is which function is invoked in the javascript once we link it in our HTML page.

For Example, the Kontera code includes the following text:-



There is no call to any of the functions contained in the KonaLibInLine.js file anywhere on the page.

Reply

Dunno about the Kontera ads - but I did find a solution that suits my purpose well, i.e. to create Modal Pop-up boxes using CSS and some JS.

There's a short tutorial which shows you how to do it pretty well... Here you go: http://www.sitening.com/blog/2006/03/29/cr...and-javascript/

Reply

For me, i've use jquery http://jquery.com/
and thickbox http://jquery.com/demo/thickbox/

Thickbox is an extension for jquery. Thickbox will create a dialogbox like "something" in the middle of the page, and gray out the rest. Clicking anything outside will return to the original page. I find it a lot easier to modify, since it's based on jquery, and jquery is in fact very powerful. And page for Thickbox can be embded HTML, iframe, another page or image (comes with it's own slide browser).

For your application, all you need is to comment out the code that gray out the page, and then add code to move the dialogbox around. That's it.

You can see a sample of it at sourceforge, when you select the mirror for the file you're downloading.

Give it a try, i found it amazing

Reply

http://15daysofjquery.com/draggable-droppa...ables-oh-my/22/
just in case you want a tutorial, it also for JQUERY framework.

edit: this one is draggable and JQUERY is very easy to use js framework. no need study js further.

Reply

I don't know if it is what you want but take a look to this freeware i found a time ago:

Ferant Studio Lite

Also check this simple test page

Best regards,

Reply

I'm gonna use the one Tavoc said, it's by far the lightest and can easily be made valid. Just add type= into the js, and move that into head.

Reply