Coding with Jesse

Floating Layers versus Popup Windows

June 26th, 2006

There seems to be a trend towards using floating layers instead of popup windows. Floating layers (sometimes called "Div Popups" or "Floating Divs") are just HTML elements, such as a divs, styled to sit on top of the rest of the page. It's basically like a real window, and usually they are designed with an X in the top-right corner to let the user close the "window" (i.e. hide the layer).

There are some things to consider when deciding to use floating layers:

  1. Popup blockers don't block them
  2. People have to look at them at least to figure out how to close them
  3. If the user clicks a link on the page, the floating layer disappears with the rest of the page
  4. JavaScript is required to close them, but not necessarily to display them (popup windows require JavaScript for both)
  5. They will never look or act like real windows on every computer
  6. There is usually no way to minimize or resize them, or to switch back and forth between windows

If you think about it, each of these points could be a positive or negative. If you're displaying advertising, you'll be glad to sneak around popup blockers and force people to look at the thing. If you're designing a user interface, you might want to let people minimize, move and resize the popup window so they can see what is behind it.

From a usability perspective, floating layers are a bad idea. You have to design a way to close them, maybe even to move them around. But however you design them, they won't match everybody's desktop. Sure, you can design them to match the default Windows XP theme, but they will stick out like a sore thumb on Mac OSX. By using floating layers, you make people have to stop and think and figure out how to close the thing, whereas they would automatically know how to close a regular popup window without thinking.

There is already a very easy way to make a window that fits in with the rest of the operating system that can easily be moved, resized, minimized, maximized. Unless you have a strong need to use a floating layer, you might as well stick with window.open.


Comments

1 . Joe on June 26th, 2006

Joe

Hey Jesse,

I don't like any pop-ups, but this type is even more irrating than the old fashioned type.

Joe

PS... Notice the new Blog URL, I broke down and bought my own domain. You have to come over for a visit...

PSS... could you change the link in the "Links" to the new address?

2 . Jesse Skinner on June 27th, 2006

Jesse Skinner

@Joe - The site is looking great. I've updated the link now too.

3 . Joe on June 28th, 2006

Joe

Hey Jesse,
Thanks,
It's taking a little time to get the site to the point where I'm not tweaking all of the time.
But, stop by and leave a comment and any suggestions. I would appreciate it.
Joe

4 . Vijay on September 15th, 2006

Vijay

where is the link ? so that i can test and see

5 . Eugene Akiwumi on April 18th, 2008

Eugene Akiwumi

I know you wrote this entry a while ago, but I was wondering if you could point me to a tutorial for this. I'm putting together a new site at the moment and I don't want to do it in flash. What I'm looking to create is popup layers that contain video. I want to have the video float above the page and for the page to darken whilst the video layer is up. I can easily do all of this in flash, but not in css and javascript. The plan is to fed the video from a mysql database.

I would really appreciate the help.
Cheers

6 . Jesse Skinner on April 18th, 2008

Jesse Skinner

@Eugene - sounds like you'll want to use Thickbox, possibly with an IFrame, then put the video code on a separate page to be loaded within the IFrame. Here are some examples:

http://jquery.com/demo/thickbox/#examples

7 . saç dökülmesi on July 27th, 2008

saç dökülmesi

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

8 . Roman Zouev on January 21st, 2009

Roman Zouev

Hi Jesse,

I was wondering if you could direct me to code or tutorial page of how to create this floating layer you describe in your original post (the one with a little X in the top right corner) as I would like to use this on my website

Thanks,
Roman

9 . Dan on March 16th, 2009

Dan

I'm after something similar, ColorBox looks pretty good: http://colorpowered.com/colorbox/

10 . Michelle C on March 17th, 2009

Michelle C

I have pop-ups on my website that don't popup unless the link is clicked. The code they were written in is javascript. The problem is that when they do pop-up they go to the top of the page. For links that are further down on the page one might not realize they need to scroll to the top to see the popup. Do you know any code that can have the popup appear at the top of the screen the person is viewing instead of the top of the site?

Here is the site: www.energybizforum.com/speakers_panelists.cfm

11 . Kay on March 30th, 2009

Kay

good article.I dont even love it. It bored likewise

12 . john on October 16th, 2009

john

floating layers are a bad idea? I don't know about that.
I've seen them put to good use. One place that I can think of off the top off my head are the ones we used at Holts. The thumbnails on the left side open some slick popups in my opinion.

http://www.holtrenfrew.com/holts/pages/stores/stores.dot?language_id=2&url=821

13 . Mutuelle on February 1st, 2010

Mutuelle

pop up windows are better, i thinks. Thanks for sharing.

14 . ted on March 10th, 2012

ted

I'd like to create a pop up landing page form that floats over my Web site page, The form will be used to allow a download of a .pdf report, and will send me an alert via email that someone has requested the download. The form can either be sent away with a cllick or filled out. Can I do this in Dreamweaver? Please suggest a way to do this. thank you

Comments are closed, but I'd still love to hear your thoughts.