Futurebox, lightbox without the javascript and target pseudo-class
So I recently released a revised version of Futurebox which added a lot of functionality. But one thing was nagging me, the fact that it utilised the target pseudo-class to hijack in page anchors which has a few side effects that can create some major drawbacks to the technique. One being that if you click multiple futurebox links and then click the browser back button it will go through all the previous overlays that were activated due to the natural behaviour of in page anchors. The other drawback, clicking an in page anchor can cause the page to abruptly jump as it tries to bring the anchor location to the top of the page.
But you’re thinking I’m mad, there can’t possibly be any other way to trigger a pure CSS overlay.
Radio buttons?!
Yep this technique uses radio inputs along with the checked CSS3 pseudo-class, which I described in my custom checkbox/radio inputs article, to show/hide the futurebox modals.
<ul> <li> <label for="futurebox01"> <img src="image.gif" width="100" height="102" alt="The CSS Ninja" /> </label> <input type="radio" id="futurebox01" name="gallery" /> <div class="overlay"> <label for="close" title="Close futurebox"> <img src="image.png" alt="The Css Ninja" width="469" height="500" /> </label> </div> </li> </ul>
The mark-up differs from the original futurebox. The overlay now needs to appear directly below the image, the images are wrapped in a label as well as the overlay, we set the “for” attribute on the label so we can check the radio without having to actually click the radio. We also use that to our advantage so we can actually close the modal once it’s been opened by having the large image wrapped in a label with a “for” attribute to a hidden radio button.
Having the same name value on all the inputs makes sure only one of the radio buttons can be checked at any one time.
ul li input { display: none; } ul li input:checked + .overlay { display: table; }
Since we don’t actually want or need to see the radio button we hide it. As mentioned before the “for” attribute controls the checking and unchecking of the input.
Unfortunately due to a bug in IE (you’ll need to login to view it, or just change your UA string to googlebot 
) only labels with text trigger the input. Since IE9 is the first IE to support the checked pseudo-class if this bug is fixed this technique will work, until then it won’t. Let’s hope a fix makes it into IE9 final release.
The second line uses the checked pseudo-class to apply display: table to the inputs direct sibling with a class of overlay.
.overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 999; background: rgb(0,0,0); background: rgba(0,0,0,0.7); } .overlay label { display: table-cell; vertical-align: middle; text-align: center; }
The overlay styles don’t differ at all to the original demo, except that instead of an anchor tag wrapping the image it’s now a label. When the input is checked the overlay sibling of that input becomes visible, by setting it to display: table, as shown in the previous CSS block. The label has display: table-cell applied to it so it’ll act like a table cell and naturally fill all height and width available to it. Applying vertical-align: middle will make the image vertically center and to horizontally center the image we take advantage of the fact that images are inline elements and just set the label to have text-align: center.
Not just for images
Since futurebox was only ever originally meant for loading images I thought I would extend this new version to also load static and dynamic content (iframes). In the demo the second listing shows 2 examples of static content and 2 examples of loading an iframe.
Static content
In order to show static content within a futurebox overlay the mark-up differs slightly.
<ul> <li> <label for="futurebox01"> <img src="image.gif" width="100" height="102" alt="The CSS Ninja" /> </label> <input type="radio" id="futurebox01" name="gallery" /> <div class="overlay"> <label for="close" title="Close futurebox"> <span class="content01"> <span class="inner_content"> // content goes here </span> </span> </label> </div> </li> </ul>
Rather than have the image we have 2 spans, although 1 is fine I used 2 to make the scrolling look nicer.
.content01 { display: block; width: 460px; padding: 20px; background: #fff; color: #000; margin: 0 auto; text-align: left; cursor: auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .content01 .inner_content { display: block; height: 500px; overflow-y: auto; }
The content span I apply a base width and some padding along with applying some CSS3 to give the modal some nice rounded corners.
The inner content span I set a fixed height and apply overflow-y to auto so any content that extends further will show a vertical scrollbar otherwise if the content fits it will hide the scrollbar.
The reason I use spans and not divs is because a label is a inline element and putting divs inside it is not only invalid but will also cause render issues in some browsers. So using a span and setting it to display: block handles that dilemma.
Change the height of individual modals
Since the base height of the static content container is quite high putting in a small amount of content will create alot of empty white space. You can get around it by targeting specific futurebox modals and set the height to something else.
#futurebox07 + .overlay .inner_content { height: 265px; }
Each input has their own id so the “for” attribute will work on the labels, we can then use that id to target specific modals and change their height.
It’s an iframe
Loading static content has a lot of great uses but sometimes only an iframe can handle some situations such as submitting a form within a modal or loading an external resource.
The first iframe example loads up my contact page, feel free contact me, so you can submit a form without affecting the modal or causing a post back on the parent page.
The second iframe loads a Google search for futurebox.
Since iframes are naturally inline placing it inside a label isn’t invalid and won’t cause any browser issues.
.overlay iframe { background: #ffffff; border: none; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
To give the iframe the same padding and rounded corners as the images and static content modals, we add a few styles to reset the iframes border, add some padding, set the background and apply some border-radius values to give it rounded corners.
Close buttons
I’ve also added close buttons on the static and iframe modals, these are purely for show and don’t technically close the modal since clicking anywhere on the overlay will close the modal. It’s purely there to give the user the feeling they are actually closing something by clicking a button, rather than the background.
<label for="close" title="Close futurebox"> <span class="content01 content02"> <strong class="closebutton" title="Close futurebox">X</strong> // content </span> </label>
To add the close button I’ve added a strong tag within the content container. I’ve just added an X inside to represent the close action and added a title attribute so it makes sense.
.closebutton { background: #606061; color: #FFFFFF; cursor: pointer; height: 24px; line-height: 24px; overflow: hidden; position: absolute; right: -12px; text-align: center; top: -12px; width: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; }
Since we have fixed width content it makes it possible to position it correctly while still keeping the futurebox horizontally centred, that’s the reason there is no close on the image based modals as the width can vary from image to image. To sit the button to the right of the futurebox I absolutely position it and set top and right to -12px so it will sit slightly offset from the container.
To create the circle effect I set the width and height to 24px and apply a border-radius of 12px for either side which will create our circle.
.closebutton:hover { background: #318DF2; text-shadow: 1px 1px 1px #ccc; }
When the user hovers over the close button I change the background-color and give the X a light drop shadow.
Mix it up
We can mix up the styles of the futurebox by adding a class to the parent ul, in the last list example I’ve added a class to do just that.
.theme01 .overlay { background: none; } .theme01 .overlay label > img, .theme01 .overlay iframe, theme01 .content01 { border: 1px solid #ccc; -moz-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000; -webkit-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000; box-shadow: 5px 5px 10px #000, -5px -5px 10px #000; }
Instead of a semi transparent rgba background, I’ve reset the background to none and applied a dual box shadow to the overlay items.
Love it, hate it?
Think it’s awesome, think it’s an abomination? Let me know what you think or if you have any suggestions on how you think it could work better make sure to leave a comment.
Short URL: http://cssn.in/ja/025
Post filed under: css.
Comments
Trackbacks
-
[...] This post was mentioned on Twitter by Web Startup Group, Tech Lunatick, VIP Emp and Startup, Technojobz, Campistron Rémi and others. Campistron Rémi said: Futurebox, lightbox without the javascript and target pseudo-class http://icio.us/qu1wwq [...]
-
[...] Futurebox, Lightbox without the JavaScript and target pseudo-class By Ryan Seddon, April 10th, 2010 Site: The CSS Ninja [...]
-
[...] Futurebox, Lightbox without the JavaScript and target pseudo-class By Ryan Seddon, April 10th, 2010 Site: The CSS Ninja [...]
-
[...] 9.Futurebox,Lightbox without the Javascript and Target pseudo-class A light box effect without Javascript DEMO [...]
very nice work
steve, April 10th, 2010Very nice work! I like it
Daniel15, April 10th, 2010Hiya,
interesting Reading, nice article. I throught I would give you a quick heads up to say that the method works on the iPhone but due to the button placement it’s not possible to exit the box once it’s open.
Cheers,
jamie
Jamie knight, April 10th, 2010Great !
nataz, April 10th, 2010Well done. The only issue I see is that the iFrame content items all load on page load it seems. In a situation where you would want the pop-up to dynamically load different pages based on the link (say for a data editor or rich content site) this wouldn’t be feasible.
Also for a gallery I’m guessing all the large versions of the images are loading on each page load?
Pretty slick though otherwise. Nice job.
Steve, April 11th, 2010@Jamie – The image modals can be closed but you have to tap the image itself to close it, tapping the background won’t won’t work not sure why. The content and iframe examples can’t be closed at all on the iPhone will need to investigate further as to why.
@Steve – Yeah all the content gets loaded at the same time. For the images you could apply them as background images that only get download as the radio button is checked e.g.
You’ll have less control over the image styles, no padding, background or border-radius with it being a background but then you don’t load the high res image until it’s clicked.
As for the iframes that can’t be avoided.
The Css Ninja, April 11th, 2010Great work. I love the close button myself, very clever.
Did you mean to have two sections titled “Close buttons” in a row? Is the second one supposed to be called “Themes”?
Your article is well written but seems like a draft. You should check your grammar and phrasing, e.g., “labels with anything other than text won’t trigger the corresponding input and will instead ignore it” should be “only labels with text trigger the input”.
John Tantalo, April 11th, 2010John, oops I don’t know how that duplicate title slipped by. I’ve updated it to the correct one.
That phrasing sounds much more succinct than what I had, cheers! I always read my articles several times before I publish them but maybe that’s the problem. A fresh set of eyes can always pick up silly mistakes like that.
The Css Ninja, April 11th, 2010from six revision i can visit and landing here…
Beben, April 18th, 2010its a web inspiration…nice to meet you ^_^’
The fact that the items are not anchor tags means I cannot right click them to open them in a new window. The only way I can view them is by clicking them and viewing them in the lightbox.
Because you’ve done away with :target and the hash # links, I can’t directly link somebody to particular item.
Zachary Johnson, April 29th, 2010it a great approach but I think only viable for a easy and static site for presentation only, for example here come one think you can’t do with this approach, suppose you need to do something after the user hit or click in the close button, that’s it a callback function, and without javascript this in not possible, so I think is great a lightbox without javascript, but for a webapplication you will need a submodal pop up build it in javascript.
Nice work =)
nahum, April 30th, 2010The tip of using a hidden input is really creative. I love it. Thanks for sharing.
Deluxe Blog Tips, May 1st, 2010Great post it has helped me out a lot as I am learning CSS. I do have a question though. I am trying to use this in a page with a rollover menu. Both the rollover and the pictures use lists and I have a style sheet that needs two mentions of UL and LI. I have not been able to get them to play together. Does anyone have any idea how I could do this? Thanks!
Evan, May 22nd, 2010Love it! I would love to create a form just like in your demo, how do i do that?
Luke, May 27th, 2010As the author of jQuery’s Lightbox, which has grown bigger (in terms of complexity) than I am hoping for, this is definitely interesting.
I’ve been working on a HTML5/CSS3 edition of my website, and definitely will be experimenting with this. How is browser support, IE6+, FF3+, Safari, Opera?
If I do decide to go down this direction, will likely be using CSS3 animations to obtain proper modal effects. Looking forward to seeing how this turns out.
Great work! Lovely intuitive idea. How did you come to it? Did you set out with the goal to make it only in CSS?
Benjamin "balupton" Lupton, June 23rd, 2010@Luke – What form are you referring to?
The Css Ninja, July 5th, 2010@Benjamin L –
Browser support is very good with the obvious lack of support from IE6+, this should work in IE9 but there is a bug (which I mention in the article) that the IE team is aware of.
CSS3 animation I haven’t looked with this version, I did however go into using css3 animation in v2 of futurebox this version still uses the
:targetpseudo class.Thank you. I just started playing with the
The Css Ninja, July 5th, 2010:targetpseudo class and was thinking how it could be used and basically evolved from there.@Evan – Add a class to both the containing ul’s of the menu and futurebox listing that way neither of them directly affect ul and li tags.
The Css Ninja, July 5th, 2010The contact form.. third image on the Static & Iframe demo
Luke, July 7th, 2010@Luke – That’s just a WordPress plugin called cforms and I just styled the form myself.
The Css Ninja, July 7th, 2010