• Floating Layers versus Popup Windows

    Jun 26 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 at 3:02pm on June 26, 2006

    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 at 12:49pm on June 27, 2006

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

    3. Joe at 9:30am on June 28, 2006

    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 at 11:10pm on September 15, 2006

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

    5. Eugene Akiwumi at 3:42am on April 18, 2008

    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 at 7:08am on April 18, 2008

    @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 at 1:14am on July 27, 2008

    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 at 9:37am on January 21, 2009

    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 at 5:51pm on March 16, 2009

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

    10. Michelle C at 6:54pm on March 17, 2009

    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 at 1:50pm on March 30, 2009

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

    12. john at 12:32pm on October 16, 2009

    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 at 6:59am on February 1, 2010

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

    14. ted at 1:26am on March 10, 2012

    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

    Commenting is now closed. Come find me on Twitter.