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 [...]
-
[...] 3. Futurebox, lightbox without the javascript and target pseudo-class [...]
-
[...] 2. Futurebox [...]
-
[...] 3. Futurebox, lightbox without the javascript and target pseudo-class [...]
-
[...] to pure CSS3 popups, I take no credit at all, the credit is due to The CSS Ninja and his excellent Futurebox tutorial. DEMO Rounded Thumbnail gallery CSS3 is shaping up to be quite promising. The following is an [...]
very nice work
steve, April 10th, 2010Very nice work! I like it :D
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. :P
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, 2010Small bug: If you have a vertical scrollbar on the page and click an image, the opacy of the page doesn’t change below the image.
But very nice script indeed!
Tom, September 24th, 2010Work w flash? Can i call this from lash?
trex, November 9th, 2010@Trex – Well it would required javascript to “call” it from flash. Just use ExternalInterface to pass through some code to target the radio button and check it programmatically.
The Css Ninja, November 9th, 2010For future indeed. nice work!
chris, November 12th, 2010nice technic, but not useful, not working in IE8 at least. you can’t use this on a project yet. maybe in 3-4 years :)
crina, December 13th, 2010Well its really cool thing, as matter of loading is concerned, if you take me as an example i got a lot of script in my codes so using alternate methods of css is best, but this one is having issue of IE that’s a problem, but i will still use after the release of IE9 if it supported it.
cryoffalcon, February 6th, 2011Nice work i appreciate it.
Thank you posting the techniques, they are awesome and are what I am trying to do w/o the use of javascript. However, as I am pretty green in CSS, I am not able to use your codes for what I am trying to do.
As you can see from the my site, I have several icons below the image and when invoke it directs users to a site or display info about the site (via iframe). From looking at your codes, I cannot figure how to center the icons below the image and space them evenly. I try to use table, span, etc….but it does not work.
Is there a way that I can accomplish that?
Thank you…
Jon Phan, February 9th, 2011hello,
i got a question. i want to use this really nice futurebox, but there is imo a bug.
when you smaller the browser window and use the scrollbars, then the background is in the scrolled are gone. i cannot explain it correct in english, sorry.
i tried many things, but when i use the futurebox on a page, which has so much content, that there is a scrollbar, and someone clicks on an image and then uses the scrollbar, it looks pretty sh**. #
is there anything to do?
Patrick, March 2nd, 2011br
patrick
@Patrick –
If I’m understanding you correctly you mean that the overlay doesn’t stay fixed in the viewport when you scroll down the page?
You can fix that by setting the
The Css Ninja, March 2nd, 2011.overlayclass to beposition: fixedrather than absolute that way even when you scroll the overlay will always be visible.oh yes, that is exactly what i needed. i tried it with position fixed, but did not take out the absolute.
thanks a lot
Patrick, March 3rd, 2011Can you integrate this into a gallery setting, where you can go previous – next?
Garret, April 15th, 2011@Garret –
I did a revised version of futurebox that still uses the
The Css Ninja, April 21st, 2011:targetpseudo-class but does add next previous buttons etc.outstanding.
Current User, June 6th, 2011this is the one that actually works.
even on android phone, without disabling scrolling.
you rock!
Hello great tutorial.
Stijn, June 9th, 2011But I have a few problems, my futurebox won’t close and the background is restricted to a div (wrapper). How can I fix this?
@Stijn -
Hard to say without a link or testcase with the issue you’re having.
Ryan Seddon, June 13th, 2011Hi!
Sorry for my english, i’m french and a novice in webdesign.
Firstable, i’d like to say thanks for the article, very usefull!
But, I’m having an issue, the picture won’t close. I don’t know if it’s due to the position of .overlay (i made it fixed). I don’t have a link to show you, my website’s not online yet -__-
i don’t put the iframe’s line on the CSS, maybe it’s the problem?
here’s a pic with firebug open.
Gwen, June 26th, 2011http://imageshack.us/photo/my-images/820/capturedcran20110626125.png/
Maybe it could help.
Hi nice Box
I was trying to implement this in Blogger Platform but there was no overlay so after Inspecting the Element I found this error
Viewport width or height set to physical device width, try using “device-width” constant instead for future compatibility.
I am a newbie to this ,please recommend a solution,This is a place where I implemented this http://www.demo.stylifyyourblog.com/2011/08/futurebox.html
Prayag Verma, August 11th, 2011I used a CSS lightbox to display Youtube videos once a user clicks an image earlier last week. However, I found that after I played the video and closed the lightbox, the video would continue to play in the background.
I found the same issue with futurebox, is it just impossible to close the window and the video.
I hope what I said makes sense. If you have a fix for this I would highly appreciate it. Or would I have to just use a javascript lightbox
Denis, August 16th, 2011@Prayag Verma –
The meta tag in your current example is using width and not device width
You should instead use the following:
See safari docs on the viewport meta tag for more info
Ryan Seddon, August 22nd, 2011I can’t see the meta tags you mentioned in the Black box in the code , please mention them without the Black Background
Thanks a lot
Prayag Verma, September 1st, 2011doesn’t work with IE8…is there a hack I can use?
pinar, November 8th, 2011Hi, I have been following your awesome ninja skills with css for sometime. However, I have taken your ninja skills and mixed it together with the aid of CSS3 to create a transition effect for the future/lightbox.
My code is here, it’s just a proof of concept, feel free to use, polish, take credit,etc.
HTML :: http://pastebin.com/RhUgv6QN
CSS :: http://pastebin.com/KFYWTL30
Please note I did not embed the images so you will need to provide your own if you try this.
Cameron Milton, November 18th, 2011