Reveal: jQuery Modal Plugin

wrote this on in . 101 reactions

At this point, it's pretty obvious we love jQuery here at ZURB. Reveal is our newest jQuery plugin for making dead simple and sexy modals. We use modals fairly frequently - they are a fantastic way to keep users engaged without leaving a page. There are several critical benefits there:

  • Speed: Popping a modal that has already loaded on the page is going to be basically instant - this retains visitors and keeps them happy
  • Maintains Context: Modals are meant to be a compartmentalized way to take action. By keeping a user on the page they don't loose the context of what they were browsing/working on
  • Focus: By essentially "removing" the rest of the page to give absolute focus to a single action, it gives the user focus and understanding of what needs to be done

Now what makes Reveal different than those other modal plugins you've seen while perusing the interwebs? Well, we kept ourselves focused on three things while we wrote Reveal:

  • Ease of Implementation: Reveal is dead simple to get going. For designers who aren't comfortable with jQuery or javascript, Reveal can be implemented without writing a single line of javascript (see how below)
  • Sleek Cross-Browser Style: We tried to make a style agnostic enough to live on almost any site, but that is still really sexy. Don't like it? No worries, everything can be changed in CSS.
  • Lightweight at 1.75KB: Minified Reveal is less than 2KB which means it comes at almost no cost to your sites load time

Well, now that you're up to speed on Reveal, you should check it out on our playground!

Check out the Reveal Playground Page

Image03
Swing and a Miss
Image00
You're Design Thinking Too Much
Design pot
Design or Get Off the Pot

It has 207 comments.

Dave Spurr (ZURB) says

On the demo page in FF 3.6 on OS X 10.6.6 when I scroll down the page and click the button the modal doesn't appear on the screen (I had to scroll up to find it) - it does on Safari though.


michael k (ZURB) says

Orbit 1.2, now this, among other stuff, all for free. Slick and elegant. You guys are f*cking great.


Dave (ZURB) says

@Dave - Hey, we just tried to check that out but we couldn't reproduce the issue. We just tested on FF 3.6 on Snow Leopard and the modal accurately came into the viewport even when scrolled down the page. We'll try to check it out more, but for now haven't been able to reproduce the issue.

@Michael - We're doing what we can to bring the jQuery goodness to the world. Appreciate the props!


Alan (ZURB) says

Brilliant, thanks.


Colin Scroggins (ZURB) says

The plugin is wonderful! Thanks.

Just wanted to mention that in IE8 the page turns black, which seems kinda jarring. Isn't there a background opacity trick for IE?


Martin Kliehm (ZURB) says

Is the plugin accessible? Above all keyboard navigable? Does the focus return where you left when exiting the modal? Is the screenreader buffer being updated? Did you follow ARIA best practices for the modal design pattern?


Ilya V. Azarov (ZURB) says

Most correct plugin for Opera browser. Cool!


Andy Warburton (ZURB) says

One of the sexiest modal boxes I've seen in a long time. I'll be making an effort to include them on our site very soon! Thanks for taking the time to make this public guys!


pol (ZURB) says

Data-id is übercool and thanks for sharing yet to me it's not ready for primetime as the reveal-modal-bg {position: fixed; height: 100%;width: 100%;} doesn't play well with iPad (at least on the demo you set up on the playground).

I can't describe in words the issue but if you have an iPad around check what I mean.

Bests, p

i <3 and use a lot the textChangeEvent plugin


Pmj7 (ZURB) says

Misbehaves on an iPad, the semi-transparent cover's top starts at the top of the web page instead of the top of the screen.


Guillaume Lambert (ZURB) says

Awesome plugin guys!

Any way we can the modal content in AJAX instead of a div already in the page?

Keep up the good work!


Dave (ZURB) says

@Alan - Thanks! We appreciate the love.

@Colin - Yes, that was something we looked into but it really struggled some of the Reveal animations (got very choppy). For usability reasons we kept it solid black on browsers that didn't support RGBA for now, but we're investigating a better solution for a future release.

@Martin - Haha, usability guru eh? For this release we've kept the code and interactions as simple as possible, but we will definitely look into keyboard navigation in the future (simple escape close command)

@Ilya - Awesome - we try to make our plugins compatible with modern browsers as much as possible without creating bloat code that's too targeted, but glad to hear it's shining on Opera.

@Andy - We try to share our jQuery goodness with everyone. Honestly sharing the projects really ends up making them better - a good number of suggestions from these comments gets included in future releases of the plugins.

@pol - You KNOW data-attribute is the new valid HTML hotness! It's a great convention to make simple plugins like this super easy to implement. We haven't tried to tackle mobile compatibility yet, but that's a great suggestion for future releases.

@Pmj7 - Yes yes, we haven't tested it on mobile devices yet but we'll be looking into it for future releases.

@Guillaume - Thanks! AJAXing content into the modal wouldn't be too crazy with some jQuery AJAX magic, but it's not something we tackled for this release - also much like the other comment, this is a great idea for a next release.

Thanks for all the great feedback and kudos everyone - it's much appreciated. We really do spend time looking through these and considering comments for future releases.


LucianO (ZURB) says

Hi, im trying to use it but it doesn't work. I don't know why!!! The demo works great, but when i put the code in mi wordpress blog it doesnt work! I put The Modal Markup just before close body but it apear in the site and must be hidden...

Thanks!


Guillaume (ZURB) says

Awesome man, really glad you guys are taking any suggestions into considerations ;) I'll keep looking at this page from time to time!


Gabriel Izaias (ZURB) says

@LucianO check if you have 2 jQuery includes on the page. WP plugins can add pretty much anything to the wp_head hook and, sometimes, they include the jQuery library.


Dave (ZURB) says

@LucianO - Not a Wordpress wiz, but would guess there is a conflict somewhere in the jQuery (hopefully it's not us since we try to namespace everything in general).

@Guillaume - Will be making some updates to the plugin in the next couple months here as we get some time to use in the wild :)

@Gabriel - True that.


cs (ZURB) says

Modal disappears behind a ajax-loaded div (used jquery's 'load' command to pull ajax content into a div from the server.) I tried setting the z-index of the div to "1" -- but that didn't seem to work. Suggestions?

Great plugin!


Russ Johnson (ZURB) says

Is there a way to programmatically close the modal? You showed an example of programmatically launching it, but I would like to fire the close method on submit of my form.

Thanks.


Iain Munro (ZURB) says

Evening

Great plugin.

The only file that is missing which is called up in the reveal.css is:

modal-gloss.png


Dave (ZURB) says

@cs - Not sure what you mean by the ajax-loaded div being in front of the modal, but that sounds like z-indexing issue. Just try to make sure the z-index of your AJAX content is greater than your modals (101 is the default Reveal modal index) and also make sure your content DIV has a "position" declaration or else the z-index won't apply :)

@Russ - Right now there is not, but that's a great suggestion. Will definitely be in the next release. The code is in there, just need to hook it up to be called programmatically.

@Iain - Fantastic catch. Somehow that slipped through the cracks but it has been fixed. Rock and roll Iain.


David White (ZURB) says

Thanks, I've been updating a project management application the last couple of weeks and one of my goals was to update the facebox plugin and try and put all the hacks I've made to it to get things to work in a newer version but I've just replaced it now completely with this.

Will send you a link to the application when it's finished. Great work.


Dave (ZURB) says

@David - Glad we could help :) Looking forward to seeing what Reveal looks like in your application. Cheers!


Nuno (ZURB) says

Hi Guys!!!

What a great plugin!!! Easy to use!! :) But i have a question... there exist any way to get your plugin valid in terms of html language... i mean data-reveal-id="myModal" is not an html tag!!!

Does anyone have a solution for this situation?


Maor Barazany (ZURB) says

Very nice modal window and easy to implement.

I have only one problem is with a Microsoft Windows Media player flash object, which stays above the modal window, so I see the test in the modal behind it. I already tried to add the wMode=transparent to the object and to the embed and to play with the z-index, but this bloody MS player stays on top. Is there a way to force the modal window to be above that player?

Thanks, Maor


Samuel Richardson (ZURB) says

Nice plugin. Simple and slick. Needs a way of programatically closing the modal without simulating a click on the close button. Also being able to bind onto some of the events would be good.


Bryan Endersstocker (ZURB) says

Any idea why pulling the modal div content in via AJAX would keep the close button from working? modalup is the class of buttons that launch the modal. myModal is the modal div. Without the following function the close button works but the modal doesn't do what I need since its a confirmation to remove a specific item from a database, hence the many, generated modal launch buttons.

$(function() {
    $('.modalup').live("click",function() 
    {
        $("#myModal").html('<img src="moreajax.gif" />');
        var ISBN = $(this).attr("id");
        $.ajax({
            type: "POST",
            url: "modal.php",
            data: "ISBN="+ ISBN, 
            cache: false,
            success: function(html){
            $("#myModal").html(html);
            }
        });
        return false;
    });
});


Bryan Endersstocker (ZURB) says

Never mind. I figured it out. I had the button inside the AJAX div. I pulled it out, so it's not continually re-generated and removed from the listener.


Bryan Endersstocker (ZURB) says

If you want this to work properly on iPhone or iPad add the following to your CSS. You would think that it would lengthen the body in addition to the modal background, but it does not. It merely extends the modal background to the bottom of the page (so long as the page is under 99,999 pixels tall; you can adjust the value if your site is taller).

/*iPhone*/
@media only screen and (max-device-width: 480px) {
    .reveal-modal-bg {
        height: 99999px !important;
    }
}

/*iPad*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .reveal-modal-bg {
        height: 99999px !important;
    }
}


Peter (ZURB) says

Great Plugin, I've been using colorbox for years but it's too bulky, I love the simplicity of reveal and have decided to switch it for all of my sites.

My question is:

How can I make it so that the modal box appears on page load?

thanks everyone

P


Dave (ZURB) says

@Nuno - We are excited to let you know that custom data attributes are valid with an HTML5 doctype. We really excited about the possibilities of attaching data directly to DOM elements manually :)

@Maor - Sounds like a z-indexing issue. I know this has been a problem for flash in Chrome for certain people (meaning z-indexing does nothing and Flash automatically is rendered in front of everything). Check to make sure that your Flash object is set at a lower z-index.

@Samuel - The programmatic closing is on the list of next release features

@Bryan - We'll have to do some testing on that iPad and iPhone CSS, but that is in the list of features for the next release, so kudos for trying to tackle it head on!

@Peter - You can definitely launch Reveal on page load, just need to call the actual plugin on a page load handler instead of a click...

That should do you fine :)

On a final note, Reveal now lives on the almighty GitHub! Check that out here: https://github.com/zurb/reveal. All future issues should be logged on GitHub.

Woot!


Mark (ZURB) says

Hi,

this is a very nice plugin. Is there any way to override a js-confirmation dialog with this script?

Thanks in advance Mark


Miguel Nunes (ZURB) says

Magnificent, thanks !


Martino (ZURB) says

Really really nice plugin.

Like Peter I'm looking for a way to have the modal box appearing on page load.

I tried poking around with the code but still no luck (replacing the "click" with load/onload). Any hint?

Thanks Martino


Mark (ZURB) says

@Maritino

$(document).ready(function() {
   $('#myModal').reveal();
});


Dave (ZURB) says

@Mark - We haven't looked into overriding alerts too much and we probably won't be diving into that immediately since there are other features and requests that are going to make more sense for Reveal right now (but we will be sure to check around if people are interested in having this as a feature for future releases)

@Miguel - Welcome!

@Martino & Mark - Good stuff and that code should work (if you have any images in the modal though you are going to want to use:

$(window).load(function() {
     $('#myModal').reveal();
});


Serban (ZURB) says

Looking also for how to close the modal problematically by calling a method.


Serban (ZURB) says

A poor simple solution is to simulate a click on the close button: $('#myModal .close-reveal-modal').trigger('click.modalEvent');


Jon Kristian (ZURB) says

Oh I simply love this!

I wonder if it's possible to open an external site inside? For instance paypal payment.

Here's another example of what I am thinking about: http://www.massimocorner.com/libraries/jquery/modalframe/index.htm

That would be awesome!


elijah (ZURB) says

Is there a way to get the modal to once appear once. e.g. on a landing page?


question (ZURB) says

hey, is there a way to make the background opacity lower when the modal is open? I'm trying to basically make 10% or less of everything else visible when the modal is open.


jack (ZURB) says

Why is it that Firebug is returning errors that $("a[data-reveal-id]").live is not a function. I tried to programmatically call the modal by using $("#modalBox").reveal() and it says .reveal is also not a function. I've included all necessary .js files.


Rhys Thomas (ZURB) says

First off, great plugin. I used it on a site for a friend of mine as a popup contact form and it worked just like it says on the tin. I was up and running site wide in ten minutes flat. This was a site built just with static pages and a bit of jquery though (Reveal and Nivo Slider), I cannot get it to work at all in my own website which is built on WordPress.

I'm using a child theme on top of the default 2010 theme with no other jQuery plugins used at all. All the files are in the same directory as the files that call them to get around relative path errors, and all ID's have been changed from the default to something that shouldn't clash with anything in jQuery. If you have any idea's what I'm doing wrong I'd be very happy as I was looking forward to using it for a couple of things on my site.

It is great though and I'll be using it again for sure. Good job guys.


Brad (ZURB) says

I am using this plugin and it is great. I have it loading up once the user visits the home page onLoad, but I cannot figure out how to read the users cookies and have it stop popping up for users when they return to the home page who have already viewed it. Any help would be greatly appreciated!


Bobby Tuck (ZURB) says

Great plugin! I'm trying to zebra-stripe a table inside the modal, but I'm not clear why I'm not able to programmatically zebra-stripe the table inside Reveal. The code I'm using is pretty simple (and works for the tables on the actual page -- but not within the modal itself).

Here's the simple code:

$("table tbody tr:nth-child(odd)").addClass("odd");

Any ideas?


Alan Houser (ZURB) says

Great awesomesauce on Reveal! It's perfect for most applications.

I was wondering though (uh-oh) about Flash content.

I've been asked to add a SWF to a lightbox. (gross) I've got everything working except the swf plays on page-load, when I would like it to play on Reveal-load. :)

The same thing happens with a YouTube video, and I'm surprised no-one else mentioned this. With YouTube, there's obviously a built-in PLAY button, but on closing reveal, you definitely still hear the video playing.

Thanks again!


Alan Houser (ZURB) says

Please ignore the above message. I've come to realize that while Reveal has incredible style, it's not meant for dynamic content, but only HTML & Images. I'll still use it, but not for flash/video. Thanks again.


Sam Beckham (ZURB) says

Awesome plug-in guys, very versatile; with a few tweaks it can be used for loads of things.

Is there a way to make the modal fire on page load using the URL? You know like 'www.foo.com#bar' will take you to the 'bar' anchor on the 'foo' page.

I've tried doing it using the code below but it doesn't really work all that well. Well actually it doesn't work at all.

$(document).ready(function(){
if( window.location.hash ) {
    $(window.location.hash).click();
}});


Jorge Sousa (ZURB) says

Hi how can I put 2 modals at the some page? thanks


stuart dutton (ZURB) says

Hi.. I love your reveal plugin... Just one quick question.. I am working on a page with no scroll area and so for longer pieces of text I was wondering if there is a way of setting a max height for the plugin to autosize to but anything above that would implement a scrollbar inside the reveal div?? any ideas.. I am afraid I am only a moderate html user..

Thank you in advance.. If anyone else can suggest , I would be grateful.


boxfrommars (ZURB) says

modal window can be closed like this, i think:

$('#myModal').trigger('reveal:close');

thanks for the nice plugin!


Eric (ZURB) says

Is it possible to go from one modal window to another? So

  1. Click on a link that brings up a modal window
  2. Click on another link inside the current modal window to close the current one and then open up another one?

I haven't tried it, but just wanted to know if this was possible.


Collin Henderson (ZURB) says

Awesome! For those of you who want to dismiss it after a set time, you can add a simple timeout function on the anchor click event like so

$('a[data-reveal-id]').live('click', function(e) {
    e.preventDefault();
    var modalLocation = $(this).attr('data-reveal-id');
    $('#'+modalLocation).reveal($(this).data());
    setTimeout(function() {
            $('#'+modalLocation).trigger('reveal:close')
        }, 7000); /*7000 is 7 seconds*/
});


Dmitry (ZURB) says

Great plugin! Thanks.

And what about M$IE 8?

a:hover {color:#f00;} - work in modal window
a:hover {color:#f00;background:#eee} - not


carlos (ZURB) says

Easy way to do the IE background instead of using RGBA would be the old fashion way of making a semi transparent .gif or .png file and just using a hack or conditional statement for the background. Granted that will up your file a couple of kb's but it will work cross browser.

Eitherway, slick stuff.


Brent Dickens (ZURB) says

Great plugin and thanks so much for sharing this with the community.

Question. Is there any way to make the link load another page into the modal window?

Cheers,

BD


Northk (ZURB) says

Great plugin guys, thanks a lot! Only issue for me is, I want to bind a separate event to the dialog close event and I'm not sure how to do that. I have a slide show running that stops when the modal dialog opens, and I want to re-start it when the dialog closes.

I'm not sure how to attach the restart event for my slideshow to the dialog close event, from outside of the Reveal script. Any ideas?

Thanks, -NorthK


Mike (ZURB) says

Doesn't seem to fully work with Google Map iframes in IE 7 or 8. There's some weirdness in the map rendering where portions are transparent.


Mike (ZURB) says

Actually... The Google Maps in IE 7/8 issue I mentioned seems to have something to do with the animations. The map renders fine with animation: 'none'.


Patrick (ZURB) says

I've got it working but it doesn't appear in the center of the screen? It's on a long, content-heavy page and it seems to push down to the center of the whole page???


Seth (ZURB) says

This is really cool. Thanks guys. I may have to wait until the solid black background in IE8 and below is fixed (looks lovely in IE9), but will definitely check back as this looks like the modal I have been waiting for.

pssst: carlos. If you posted the code for your solution, you would be the bestest guy in the whole world.


Agni (ZURB) says

FIrst of all an amazing and brilliant plugin and I would thank you for your efforts. I have used and recommended this plugin to various developers.

Now I have been using this with regular forms and it works but when I use this with Ajax and reCaptcha it displays the error message but vanishes quickly.

For example

The form has

Name Email Subject Body reCaptcha

if someone puts any thing invalid the error is thrown from server side and displayed on the modal form based on reveal plugin. However the error comes and displayed but the modal vanishes say after a second. I want user to correct it and resubmit. I have tried various ways but doesn't work. Any help/suggestion is greatly appreciated. I wish I could share the the page. I will try to do so.


Andrew (ZURB) says

What an awesome plugin! Like Agni - when including Form content, the modal closes if user includes invalid input. When (or if) re-opened the 'expected' validation messages are present - so how to keep the modal open so user can successfully submit... Many thanks AH


Max (ZURB) says

Hey! Great work with the plugin!

I am using it on my site. In the modal there are images with css hover resizing effects. I don't think that this is relevant, though. :D When I click the button to close the modal, the images seem to fade away, but suddenly they appear right back and stay there for half a second or so and then they really disappear. Could you guys help me, please?

If you don't get my problem, you can reproduce it by going to my page and click "Choose Design!" in the top right corner.

Thankies, Max


Paweł (ZURB) says

Is there any sompla way to make modal window to scroll with you?


meuselwitz online dating in meuselwitz (ZURB) says

Positive Birth,and insurance peace close clean county dry upon for department each note roof family key value good activity list throughout annual director undertake detail sale add wide discover area mark must increase allow late item consequence king slow ordinary production major hair end date criterion support correct reach retain scale month rare general home move fine series music fruit her magazine feeling museum used cut limit pick sequence ready writing effectively fairly assume brain position absolutely serious television get pay lunch focus factory commercial


Gary Smith (ZURB) says

Hi guys, a wonderful & very elegant plugin. Any chance of some previous/next buttons? I have a nivo-slider of my example websites and clicking on the current image pops up your reveal modal, but rather than closing and selecting the next/prev image in nivo-slider, I'd like to have these direct from reveal. I'm not a jQuery guru, and tried to implement it myself but while I can get the prev/next example to open in a new modal when I click on my left-reveal-modal or right-reveal-modal link , I'm struggling to implement the closing of the original modal first, and due to the binding, when the new modal is closed, the original is still there and non-closable (except with a bg click). If this could be implemented in the next version I'd be very grateful.


Paul (ZURB) says

Here, try this for IE7/8:

<!--[if IE]> <style type="text/css"> .reveal-modal-bg {background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);zoom: 1;} </style> <![endif]-->

You do lose the ability to click the background to close the modal, but I'd say it's worth the loss.


Paul (ZURB) says

Here, try this for IE7/8:

<!--[if IE]>
<style type="text/css"> 
.reveal-modal-bg {background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);zoom: 1;} 
    </style>
<![endif]-->

You do lose the ability to click the background to close the modal, but I'd say it's worth the loss.