Inline Popups

July 02, 2004

Some think that “popups” are inherently evil. I agree that in most cases they are, but I also agree there are instances that warrant the use of a popup. During the past month I have been working on a project using popups, not your ordinary popup but what you call an “inline popup.” The advantage of these popups over doing a traditional popup are , (1) it disables the page behind the popup until an action is performed, (2) the visitor of the site is presented with a clear choice on what to do next, (3) the action to retrieve the popup is instant, you don’t have to wait for a load.

This may not be the best solution for all of your popups needs, but certainly can be used where small information is needed to be gathered. I have provided a small example of the inline popup below.

A Reader's Toolbox bluehost offers quality web hosting, for personal as well as business sites. The company has to outperform its competitor lunarpagesthat offers great packages on affordable prices to all of its customers. No one can deny the value of web design in search engine marketing. Both of the above mentioned companies offer special hosting packages for online certification like VCP-310.

Comments

Cameron Moll said:

Now open the trench coat and show 'em the draggable inline popups, Blake!

Posted on Jul. 2, 2004 12:43 #

Blake Scarbrough said:

Cameron, I actually have that slated next on the agenda.

Posted on Jul. 2, 2004 14:10 #

SM Korzdorfer said:

Oh My! Playing with that made me as giddy as can be. Nice work, indeed. And what's this about draggable?

Posted on Jul. 2, 2004 14:15 #

michelle said:

popups in drag!? what a wonderful addition to the online cast of characters...errr, i mean sprites. ;-)

(sorry...couldn't resist)

Posted on Jul. 2, 2004 14:20 #

manuel razzari said:

great implementation! loved the transparent layer...
before making it dragable, some ideas. you might wish to make an option for modal/modeless dialog. you might want to dynamically append an iframe, so you can have an href attribute thus making the popup accesible (check what I mean at the url pluged on my name, click Email to a friend)

Posted on Jul. 2, 2004 14:52 #

Ray Williams said:

I'm not positive how Robert Shepherd did it, but check out MER Image Workbench (in IE unfortunately since it won't work for me in Firefox). Click on a sol number, click one of the thumbnails, then click the larger image on the right. It will pop up a much larger image. To go back, you have to click on the image. Is this related to what you're doing? It was the first thing that came to mind while reading your post.

Posted on Jul. 2, 2004 22:17 #

Matt Cahill said:

What is the browser compatability of this? I tried it in Safari and IE5 Mac (IE showing some scrollers, but otherwise fine).

Posted on Jul. 3, 2004 01:09 #

Beate said:

There are 2 DTDs inside the example-page. Is this an Error?

But: Nice work ;-)

Posted on Jul. 3, 2004 03:58 #

Blake Scarbrough said:

Beate- Yeah I need to fix that. Thanks

Matt-It has worked in all the browser I have tested, IE, Mozilla, Safari.

Posted on Jul. 3, 2004 09:49 #

Ian said:

One of the issues affecting this is the way IE will show form select lists through positioned elements that appear over the top of them. A solution is to transverse the Dom and set any getElementsByTagName('SELECT') to style.visibility='hidden', but it is something that we need to be aware of :)

Posted on Jul. 4, 2004 17:32 #

Ruben said:

Blake, this is excellent stuff. This is something that has been on my mind for ages, but I'm glad you did the dirty work. I'm definitely going to use this as inspiration.

Did you notice that if you scroll down (make your window small before getting to the popup), the page behind it is still accessible?

Posted on Jul. 6, 2004 01:24 #

coda said:

good job :)

Posted on Jul. 6, 2004 06:38 #

Sue Doe Nim said:

Sorry but that is evil. Users are forced to click that close button to get back to the page and cannot check the page for something. Losing control of my browsing experience is not fun.

Appreciate the time and skill involved in creating it though. :)

Posted on Jul. 6, 2004 07:11 #

david g said:

Nice work :) I've been doing a similar thing for the past 2 years, as it's pretty much impossible to create a good web-app using standard popups.

Sue, you're right, you probably don't want to abuse this in most cases, but in web-applications, you're not "browsing" -- a modal dialog is as necessary as in traditional applications. Any web-app that doesn't use a method like this will usually attempt to force focus on the popup window anyway, which is an unreliable and buggy solution.

As for IE showing <select> boxes "through" popups, there are a few solutions to this that don't involve hiding all <select> elements on the screen. IE has a proprietary Javascript method to create a modal dialog window, I forget the exact syntax (think it's window.createPopup) but a quick search on MSDN will turn it up. The solution that works best for me is to dynamically create an IFRAME when launching the inline popup, with the same dimensions and screen co-ordinates as the popup, and set the z-index of the popup to one less than the IFRAME, which should be set to something like 9999. It's a hack, but it works. Here's a link to an article describing it in more detail -- warning, it's very IE-centric. From what I remember, this might not work very well in IE5.0, but it works like a charm in 5.5+.

Posted on Jul. 7, 2004 09:10 #

mike said:

How did he do it? I'm looking at the source and see the javascript function, but can't figure out how the disabling is being done.

Posted on Jul. 8, 2004 04:23 #

Cameron Smith said:

2 quick points, I get a javascript error when clicking the link below the popup window link after looking at the popup.(in ie6 something to do with the email form value "document.comments_form.email is null or not an object")

I also noticed that you can still choose to change styles in Firefox (the small images at the top right side of the page) so the form behind is not completely disabled. :(

Sorry to be such a naysayer... but the rest of it great.

Cam

Posted on Jul. 8, 2004 12:39 #

test said:

Awesome!

Posted on Jul. 9, 2004 14:39 #

baz said:

Just tested it with Firefox 0.9 on Windows XP.

Dragged the "draggable popup" up past the top of the page, and released.

Bam! One dead page. I can't scroll back up far enough to reach the box, and the rest of the page is "disabled".

Not impressed, sorry!

Posted on Jul. 10, 2004 15:36 #