Hi, is it possible to vertically centre the modal? I am using modals of varying widths and heights across my site, so instead of changing the 'top' property, can the plugin handle this?

Cheers,
Husain

tried to drag and resize the popup..but cant be able to do it.........How to add drag and make it resizable......

Cory [suggested to add the following to the reveal source code to enable the modal to be close programmaticaly (from Javascript).
[http://stackoverflow.com/questions/4884369/how-do-i-programmatically-close-an-open-jquery-reveal-js-modal-box]

$.fn.hideModal = function(options){
var self = this,
modal = $(self),
topMeasure = parseInt(modal.css('top'));
$('.reveal-modal-bg').css({'display' : 'none'});
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
}

and use
$('#your_modal_box').hideModal()

That's well worthwhile.

Thank you Cory!

I have a dismiss button that sites on the outer top right corner of the modal.
I have set all z-index and overflow:visible attributes to the reveal.css to allow for this button, yet it is cut off in IE.

Any known fixes for this?

AFAICT this only occurs in IE 7/8 - didn't test 6 or 9. Whenever I load a Google map (just a standard Google map link) in the modal, with either animation, portions of the map don't render properly. There seems to be portions that don't get loaded for whatever reason and those sections end up being transparent. Loading with animation: 'none' works fine.

First off, love this plugin!

I have a client who wishes to use it but needs to have a w3c validated site. Only thing that stops this from happening if the following ID tag: 'data-reveal-id'.

Is their anyway to change this just to 'id' so it can validate?

Hope you can help.

Chris

Since closing a modal is not a problem with the trigger("reveal:close").

What about a trigger("reveal:remove").

What if you want to create a new modal by appending it to the body by clicking a element and parse in values dynamicly. Now it just adds multiple copies of the modal if creating a modal on the fly and closing it.

Just add following below line 125:

//Closing animation and remove modal
modal.bind('reveal:remove', function () {
if (!locked) {
lockModal();
if (options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop() - topOffset + 'px',
"opacity": 0
}, options.animationspeed / 2, function () {
modal.css({ 'top': topMeasure, 'opacity': 1, 'visibility': 'hidden' });
unlockModal();
});
}
if (options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity": 0
}, options.animationspeed, function () {
modal.css({ 'opacity': 1, 'visibility': 'hidden', 'top': topMeasure });
unlockModal();
});
}
if (options.animation == "none") {
modal.css({ 'visibility': 'hidden', 'top': topMeasure });
modalBG.css({ 'display': 'none' });
}
}
modal.remove();
modalBG.remove();
modal.unbind('reveal:remove');
});

I have a Reveal Modal that works locally, but when I upload it to my site it stops working. I've gone over it numerous times to make sure that my file structure is exactly the same, and it is. I even deleted everything and re-uploaded, but to no avail.

Any suggestions?

I have an need to fire a model upon page load. So I added the following code to my page:

//auto trigger modal on page load
$(document).ready(function () {
$('[data-reveal-onready]').reveal();
});

If there is any element on the page with the attribute 'data-reveal-onready' reveal is automatically fired when the page is ready.

While this works great for my needs, others might like something similar "out of the box" especially if you could add a time delay.

Hi,
I have this situation:
on first modal i put some info and option to choose. then when i choose some option (using button click) first modal should close, and second shoud open to get more info.
but second modal opens correctly on center of the page, but after a very short moment it moves up and up, and i see only a small part of this modal.

i tried to do this in 2 ways:

$('#btnSystem1200cWybierz').click(function() {
    $('#krok2').reveal({
        onOpening: function(){
            $('#krok1').trigger('reveal:close');
        }
    });
});

and 2)

$('#btnSystem1200cWybierz').click(function() {
    $('#krok1').trigger('reveal:close');
    $('#krok2').reveal();
});

in both cases i have the same problem.
any idea what i am doing wrong?

to see this in action go to: http://alfen.linuxpl.info/test/ and click 'wybierz' button on 'System 1200 Classic' or 'System 1200 Classic Podmurówka' panel.

thanks in advance!

gerard

Setting visibility: hidden doesn't hide the child elements when a "reveal" popup is closed. We've modified the code locally to set display: none instead and this fixes the issue.

Hello guys,

How can I configure my modal to show a vertical scrollbar when the content is too large?

Tks!

Felipe

Hi, i have three modals all in a data-reveal-id format. When i click one and then another straight after, it opens in front and then you can't remove the first one.

Is there a way, perhaps javascript, to check if a modal window is open, or at least close the one thats open before opening a new one.

Many thanks

Great script by the way.

I've modified the code so I can use it programmatically and also so it's compatible with back button support (a la jquery.address). The modals works fine but when the modal are triggered by the back button the behavior is that each modal is positioned a set number of pixels (around 100) below the position of the previously displayed modal. I'm not sure what is going on.

Could you shed some light on how the modal positioning is set and how I can possibly tweak the positioning?

Thanks.

Hello,

When you have a youtube video or any SWF for taht matter, for instance, in your page and fire a revela modal, this modal stays behind the video and not in front of it as it should.

I've tried to change the z-index property in CSS and tried to set wmode to transparent also, but it does't work.

Any thoughts on this ?

When using elements inside the Reveal window with CSS transitions applied to the property "all", they will keep in place when the window is moving up. When the CSS transitions are set to "none", they go up nicely.

Hey guys,

since reveal uses visibility: hidden instead of display: none (like many other modals), the element is rendered and takes up actual width. The default .reveal-modal width is 320px. If one makes a responsive design and tests it on a phone with 320px width, there's a 200px area on the side and you can "pan" the content.

My solution is disabling the modals for mobile:

@media all and (min-width: 220px) and (max-width: 480px) {
   /* Fix reveal modal's width messing things up on iPhone https://twitter.com/meanlumberjack/status/125595270158360577 */
   .reveal-modal {
      width: auto !important;
   }
}

and in the JS:

$('a[data-reveal-id]').live('click', function (event) {
  if (($('body').width()) > 700) {
    event.preventDefault();
    var modalLocation = $(this).attr('data-reveal-id');
    $('#' + modalLocation).reveal($(this).data());
  };
});

Probably a better solution would to be to depend on display: none;

(This creates a new accessibility problem though)

The Foundation version has extra CSS for responsive functionality. This should be added to the git repo.

You should add a closing callback. Thanks

The Reveal Modal script works perfect in FireFox and Chrome, but nothing pops up when I test it in Internet Explorer. Anybody got a fix for this? Thanks

The Dialog box on close makes it's objects disappear except the tag of the embedded youtube video player when viewed in google chromes browser. However , it's viewed perfectly in IE , firefox and safari and even I tested it on self coded browser I coded myself. Maybe the plugin is missing a certain syntax I hope you could fix this issue

Thanks :)

As a note this is obviously xhtml 1.0/1.1 and html 4 dependent since html5 allows for the custom data attribute.

I noticed that my pages were failing validation because of the data-reveal-id attribute. So I switched it to rel in my <a href calls and modified the jquery.reveal.js file like so:

/*---------------------------
 Listener for data-reveal-id attributes
----------------------------*/
    // @CHANGED - Made it so that it accepted the rel attribute instead of the data-reveal-id
    $('a[rel]').live('click', function(e) {
        e.preventDefault();
        var modalLocation = $(this).attr('rel');
        $('#'+modalLocation).reveal($(this).data());
    });

Since all of my links are launching modal windows this works fine for me, but if you're using lightbox or some other jquery script that attaches to rel as well, it may need to be modified to validate the string being passed. While this may not be a bug for some folks it was an issue for me and easily fixable. If this is not considered an issue I apologize.

On iPad, the modal background does not necessarily cover the whole viewport. The fix is to set the modal background height to match the body height when the modal is opened (or when the modal background element is created).

modal.bind('reveal:open', function() {
    modalBG.css('height', $('body').height());
    ...

-box-shadow: 0 0 10px rgba(0,0,0,.4);

should be box-shadow not -box-shadow

Thanks for making this!

Hello,

How do i setup auto popup as soon as someone visit website popup shows up, or may be for 5 second only, please advice.

Regards,
Umar

I used the gradient filter on some buttons in the modal and the text is all messed up as well as most aesthetics with the button. Also clicking outside of the modal to close it no longer works.

Building a site using the plugin, and it works great in every browser except IE 7+8.

On ajax success:

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

This doesn't actually close anything and the IE Console outputs this error message:

SCRIPT438: Object doesn't support this property or method
jquery.reveal.js, line 88 character 5

I checked to make sure that specific element exists on the page and it does, so I'm not sure what's going on here.

Could it have anything to do with a jquery.cycle terminating because of no images? I doubt it, but I thought I'd mention that. It's just a log message, not an error, on the cycle's part.

I could just hide the window on click but the error still outputs and I'm not happy with that solution.

Thanks in advance for the helps!!

I have a problem with modal using this jquery with twitter bootstrap dropdown.js.

assuming this is a dropdown.js for twitter bootstrap

• Click me

but it doesn't show when I click the link inside the dropdown.js

I hope you can help me for this matter.

Is this possible?

Hi,

I'm trying to fire a Reveal modal dialog from within a jQuery Cycle slideshow. I've set up a simple demo that has 3 slides. There is a link on each slide which opens a different modal dialog.

See:

http://jsfiddle.net/wjdennen/b2NG3/

To see the problem:

1. load the example and run it
2. Click on the link in the first slide. (Modal should fire, and slideshow should pause)
3. Close the modal. (Slideshow should resume)
4. Click on the link in the second slide (Modal fires -- but it's missing the background overlay 'reveal-modal-bg')
5. Close the modal. Slideshow resumes.
6. Wait for slide 1 to load again and the reveal-modal-bg is visible.

it looks like reveal-modal-bg is not hidden properly when the modal is closed?

I have navigation links that use a class that makes the link 100px wide by 40px high; selected uses background color; the rest are transparent (transparent 1x1 image with 100% opacity, no background color) and show the background image underneath with some transparency. Opening a modal in IE7/8 causes all opacity to disappear. As if the .png image has 0% opacity. Works flawlessly in FF. I love Reveal! Thank you!

Hi,
while testing with jQuery 1.6 I noticed that pop effects does not occur anymore, but fade works as expected... any idea what changed?

Because uses "visibility hidden" instead "display none", if reveal popup is bigger than page, they change page height.

I bind reveal modal to a link, everything works perfectly.

But if I double click on that link, the window will open but it would not close by the "x", nor would it close by triggering "reveal:close".

I am working on a project where I'd like to use Reveal, it would really kick ass and I love the aesthetics of it (and not to mention the Foundation framework). However, I have run into an issue. I will describe what I am attempting, how I am attempting it and the results, along with a few screen shots to show the issue.

On a tour schedule for this particular project, there are roughly 30-50 dates displayed at any given time. When clicking on a venue name, it fires the modal with the relevant show and venue info. I am using a PHP foreach loop to display each show's respective row (

<!-- Show Listing #1-->
        <div class="row show-list">
          <div class="three columns show-sep" style="padding-left: 20px;">

            <div style="float: left;">
              <div class="front-cal">
                <div class="month">Mar</div>
                <div class="day">07</div>
              </div>
            </div>

            <div class="datebox-details">
              <span class="day">Wednesday</span><br />
              <span class="time">5:00pm</span>
            </div>

          </div>

          <div class="five columns show-sep">
            <h3 class="venue"><a href="#" data-reveal-id="myModal1">BB&#8217;s Lawnside BBQ</a></h3>
            <span class="venue-location">Kansas City, MO</span> 

          </div>

          <div class="three columns">
                        <p class="gigpress-cancelled">Cancelled</p>
          </div>
        </div>

        <div id="myModal1" class="reveal-modal" style="box-shadow: 0 0 20px rgba(0,0,0,.6);">
            <h3>BB&#8217;s Lawnside BBQ</h3>
            <p>Kansas City, MO</p>

            <div class="modal-sep"></div>

            <div class="row">
                <div class="six columns">[google map]</div>
                <div class="six columns">

                    <p class="gigpress-cancelled">Cancelled</p>
                    <p><strong>Address</strong><br />1205 E 85th St</p>
                    <p><strong>Phone</strong><br />816-822-7427</p>
                    <p><strong>Website</strong><br /><a href='http://www.bbslawnsidebbq.com/' target='_blank'>http://www.bbslawnsidebbq.com/</a></p>

                </div>
            </div>

            <a class="close-reveal-modal">&#215;</a>
        </div>

                <!-- End Show Listing #1 -->

This fires the modal, but more often then not, the modal is displayed in a strange place. And as you go further down the show listing, the modal gets pushed further and further down until it goes WELL below the footer of the page and you have to scroll quite a ways just to see the darn thing.

I have tried moving the modal code outside of the the ending div tags but when I do so, no modal windows fire at all when clicked.

The first show in the list - when clicked the first time displays the modal almost completely above the entire page (only partially visible)
https://skitch.com/brilliantdick/889b4/shows-trampled-under-foot

Then after you close it, and re-click the first venue link, the modal is actually displayed in the proper place.
https://skitch.com/brilliantdick/889n1/shows-trampled-under-foot

This has completely boggled me and I'm almost to the point of giving up on Reveal. Anybody have any ideas as to why the modal location is inconsistent each time you click it and why as you go down a list, the modal window's location gets lower and lower until its completely off the page?

Can you confirm that there's no ie6 support or that it's a bug? I'm leaning toward lack of support since it doesn't work out of the box in ie6. The overlay sticks to the bottom of the container and is about 20px high. I don't love ie6 any more than any of you, trust me, just wondering for clients' sake. Stellar modal otherwise!

Here's a screenshot:
http://screencast.com/t/aJt1bz4ww

Is there a way to lock the vertical page scrolling when modal window is visible?

I have a request where I have to display small modal windows on an already opened modal window containing a form.
I added the click function on the modal form (as usual), and set the z-index of the second modal div to 9999. This way the second modal shows up well.

But when I close it, not only the second modal disappears, but also the background of the first modal.
The first modal remains visible, however it can't be closed. Only a page reload seems to help.

Is it possible to have a second reveal modal on an open reveal modal window?

youtube video in container div never hides it always shows up in the body and never hides

Hi there I saw that modal top is wrongly counted when I lunch the reveal from the containing div with relative position.

    modal.css({'top': $(document).scrollTop() - topOffset, 'opacity': 0, 'visibility': 'visible'});

https://github.com/zurb/reveal/blob/master/jquery.reveal.js#L44

That brings that the modal and background are displayed well but the modal is chopped of from the top. Most of it displays above the body element.

When I add console log to the

topOffset & topMeasure the topOffset were 30px but topMeasure goes to negative (-1000px)

Hi, i love your plug, but i have a problem with a responsive site I'm building.
The modal page center well in every browser, but in iphones always stay at the top of the page.
It's possible to center the modal page in iphones?

Thanks,

Rodrigo

If you have a table with a border on td it will display when the window is not open. If you open the window and close it , it will disappear.

Hi,

This is the case:

html:
`

My implamentations:

BG supor for IE7

if(modalBG.length == 0) {
modalBG = $('

Are there methods or plans to implement methods for firing events before and/or after the modal is triggered?

This modal is pretty nice and it's simple, but it's really annoying that for every modal a user has to click something to dismiss it, it would be nice to show something for 3 seconds (like a growl notification) and then move on.

I have a youtube video embedded within the 'Modal Display' div.

I have linking to this page through PHP referencing - ?page=videos etc...

When the page loads, the video is already 'shown' on the page, where it should be when the user clicks the link to reveal the Modal.

The video should not be shown until the visitor has clicked on the appropriate link. An example of the embed code used is:

<div id="addYoutube" class="reveal-modal">
 <h1>Add a YouTube Business Video.</h1>
<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/zoMYU_nOGNg"></param>  
<param name="allowFullScreen" value="false" autoplay="1" modestbranding="1"></param>
<param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zoMYU_nOGNg?
version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always"
allowfullscreen="false"></embed></object>
<a class="close-reveal-modal">Exit</a>
</div>

Would this issue be solved by editing a parameter within the embedded code?

Many thanks.

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about The Chest below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

I've implemented a work around for the prev/next buttons (requested by me and others). No changes to the javaScript, just html/css - it's a big of a fudge (to put it mildly) but it seems to work. Basically I add links to each #myModal with [class="prev-reveal-modal close-reveal-modal" and data-reveal-id="myPrevModal"] and [class="next-reveal-modal close-reveal-modal" and data-reveal-id="myNextModal"]. Then I add some css to control the display of the prev/next images, and Hey Presto. Not very elegant but it does the trick - could this be imlemented properly (without all the extra markup) in the next release? I have this working at http://scopevale.co.uk

<!-- Reveal Modal markup -->
<div id="my1stModal" class="reveal-modal large">
    <h3>My First Site</h3>
    <!-- previous & next buttons -->
        <a class="prev-reveal-modal close-reveal-modal" href="#" data-reveal-id="myNthModal"><img src="assets/img/reveal-modal/modal-nav-left.png" alt="website example" title="previous" /></a>
        <a class="next-reveal-modal close-reveal-modal" href="#" data-reveal-id="my2ndModal"><img src="assets/img/reveal-modal/modal-nav-right.png" alt="website example" title="next" /></a>
    <!-- end - prev/next buttons -->

     <a href="http://www.my1stsite.co.uk" target="_blank" title="click to visit the webste"><img src="assets/img/my1stImage.png" alt="website example" title="" /></a>
     <a class="close-reveal-modal"><span>close</span><img src="assets/img/reveal-modal/modal-close.png" alt="modal box close icon" title="close this window"></a>
     <h4>click on the page image to visit this website (opens in a new window)</h4>
</div>
<div id="my2ndModal" class="reveal-modal large">
    <h3>My Second Site</h3>
    <!-- previous & next buttons -->
        <a class="prev-reveal-modal close-reveal-modal" href="#" data-reveal-id="my1stModal"><img src="assets/img/reveal-modal/modal-nav-left.png" alt="website example" title="previous" /></a>
        <a class="next-reveal-modal close-reveal-modal" href="#" data-reveal-id="myNthModal"><img src="assets/img/reveal-modal/modal-nav-right.png" alt="website example" title="next" /></a>
    <!-- end - prev/next buttons -->

     <a href="http://www.my2ndsite.co.uk" target="_blank" title="click to visit the webste"><img src="assets/img/my2ndImage.png" alt="website example" title="" /></a>
     <a class="close-reveal-modal"><span>close</span><img src="assets/img/reveal-modal/modal-close.png" alt="modal box close icon" title="close this window"></a>
     <h4>click on the page image to visit this website (opens in a new window)</h4>
</div>
<div id="myNthModal" class="reveal-modal large">
    <h3>My Nth Site</h3>
    <!-- previous & next buttons -->
    <a class="prev-reveal-modal close-reveal-modal" href="#" data-reveal-id="my2ndModal"><img src="assets/img/reveal-modal/modal-nav-left.png" alt="website example" title="previous" /></a>
    <a class="next-reveal-modal close-reveal-modal" href="#" data-reveal-id="my1stModal"><img src="assets/img/reveal-modal/modal-nav-right.png" alt="website example" title="next" /></a>
        <!-- end - prev/next buttons -->

     <a href="http://www.myNthsite.co.uk" target="_blank" title="click to visit the webste"><img src="assets/img/myNthImage.png" alt="website example" title="" /></a>
     <a class="close-reveal-modal"><span>close</span><img src="assets/img/reveal-modal/modal-close.png" alt="modal box close icon" title="close this window"></a>
     <h4>click on the page image to visit this website (opens in a new window)</h4>
</div>


/* and the css at the end of reveal.css */
.reveal-modal .prev-reveal-modal { 
    position: absolute !important;
    top: 250px !important;
    left: 10px !important;
    }   

.reveal-modal .next-reveal-modal { 
    position: absolute !important;
    top: 250px !important;
    left: 650px !important;
    }

Is it possible to center the reveal modal window, and so that when you scroll up or down it stays centered ?