the Future of the Web
  • Home
  • Hire Us
  • Articles
  • About
  • Contact
  • 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.

    Tags: design popup css javascript
    View 6 Comments | Add a comment
  • Comments

    1. Joe at 9: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 6:49pm on June 27, 2006

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

    3. Joe at 3:30pm 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 5:10am on September 16, 2006

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

    5. Eugene Akiwumi at 9: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 1:08pm 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

    Add a Comment

    Note: HTML tags and entities will be converted so that they are displayed as you type them. This means if you type in <em>, people will see <em>, and if you type &lt;em&gt;, people will see &lt;em&gt;.

  • Request a Quote

  • Jesse Skinner

    Jesse Skinner
    • Hire Me
    • About Me
    • Email Me
    • RSS Feed RSS Icon
  • Recent Articles

    • Parse Accept-Language to detect a user's language
    • Twitter
    • Three years of The Future of the Web
    • Saving data to a file with PHP
    • Easy web scraping with PHP
    • See all the articles
    • IBM: Where and when to use Ajax
    • Code Igniter 1.6.0 Released
    • Update a Dev Site Automatically with Subversion
    • JavaScript Functions are Variables
    • See All...
  • Categories

    • javascript (37)
    • links (19)
    • about (18)
    • web (14)
    • server (10)
    • html (10)
    • css (8)
    • carnival (7)
    • browsers (7)
    • design (4)
    • seo (4)
    • ads (4)
    • standards (4)
    • events (4)
    • work (4)
  • Older Articles

    • May 2008
    • April 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
    • April 2007
    • March 2007
    • February 2007
    • January 2007
    • December 2006
    • November 2006
    • October 2006
    • September 2006
    • August 2006
    • July 2006
    • June 2006
    • May 2006
    • April 2006
    • March 2006
    • February 2006
    • January 2006
    • December 2005
    • November 2005
    • October 2005
    • September 2005
    • August 2005
    • April 2005
    • See All...
Copyright © 2008 Jesse Skinner | CSS | XHTML | RSS | Help | Impressum | Cutie Quilts | Internet Blog Top Sites