Pop up image

[love72817]

How does Dani doe the pop up image? I am using Yahoo Sitebuilder and would love to add that to my site.

Andy

[digital-ether]

which pop up image?

Popup's are done with JavaScript, window.open() function. This opens an actual browser window.

There are also hovering elements, which look like popups. They are also done with JavaScript and a bit of CSS.

[timsuomi]

Hi.

Been trying to find some exmaples of this (to create such a nice "pop-up effect"), but have not found any complete samples (Javascript/PHP + CSS). Could you guide me to the right direction.

Greatly appreciated!

BR,
Timo

[dickiebow]

Try Dynamic Drive and search for modal windows. They give you a similar effect that is lighter on code than lightbox. You can modify the code quite easily to work with php - eg specifying the exact size of the pop-up (use the iframe option) that appears inserted as a veiled layer on top of the page with a z-index of about 100.

[samarudge]

I use IBox
Here
I think it is really good and use it a lot

[dickiebow]

I looked at IBox after you mentioned it - looks interesting and versatile but it weighs in at 106KB of code whereas modal windows are 23KB - so IBox is bound to have more impact on server load etc.

It depends what you are trying to achieve but I think surfers want the odd great visual with the fastest downloads they can get (plus not everyone has got broadband yet and won't for some time to come).

[digital-ether]

I looked at IBox after you mentioned it - looks interesting and versatile but it weighs in at 106KB of code whereas modal windows are 23KB - so IBox is bound to have more impact on server load etc.

It depends what you are trying to achieve but I think surfers want the odd great visual with the fastest downloads they can get (plus not everyone has got broadband yet and won't for some time to come).

You can create a really lightweight "modal window" effect.

lets say you have a div, and what it to be a modal window.

<div id="modal">My content</div>

You just need some CSS:

#modal {

position:absolute;
top: 40%;
left: 40%;

}

Then place a div over the whole area of the screen for the modal effect.

<div id="modal_bg"></div>

style it.

#modal_bg {

position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;

}

Then you just need to bring the modal window foward, and the background in between the modal window the rest of the content.

So you have:

<div id="modal">My content</div>
<div id="modal_bg"></div>

<style>
#modal {

position:absolute;
top: 40%; left: 40%;
z-index: 10;

}

#modal_bg {

position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 5;

}
</style>

From their all you need is styling and generating modal windows on the fly with JS. A few fixes for the CSS difference in different browsers, and calculating the window dimensions and screen dimensions for positioning, should be less then 5kb.

[realmfilms]

Great job, how can I take this further?

How would I close the new "window" to show the content in the background?

My site example: http://www.updateaddicts.com/forumdisplay.php?f=278

also how would I make it stay in the center of the page even if they scroll?

The one from daniweb.com is activated from if you were linked here from an outside site, and when you click close it links you to # and the code is at the bottom of the page, I think then linking you to the top of the page? I'm really confused on this one.

Thanks!!

[realmfilms]

basically what I would like to accomplish is how to tie it into:

<if condition="$show">
<else />
here is my <div> that is lightbox style and can be closed to reveal the normal page.
</if>