Menu icon Foundation
Foundation 5 Reveal Options NOT WORKING

I've tried every way I know of including your documentation for the javascript option changes for Foundation 5 to get reveal options to work. The reveal wasn't working in my normal page so a create a simple page containing only a button and a reveal modal div. I can change the options directly in the reveal js but that obviously isn't feasible. I've included the entire code of my test page that isn't working. The link opens the modal every time but the options never work. I've tried several different methods such as calling $('#joinModal').foundation('reveal', 'open', {options}); on click instead of using the data-reveal-id directly on the link...again it opens the modal but no options are ever applied. I've also tried the Foundation 4 method of foundation ('reveal', {}) instead of the new way...no change. Please help!!!

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/custom.modernizr.js"></script>
    <link href="styles/site.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <a href="#" class="oJoin" data-reveal-id="joinModal">Join</a>  
        <div id="joinModal" class="reveal-modal" data-reveal>
        <h2>Awesome. I have it.</h2>
        <p class="lead">Your couch.  It is mine.</p>
        <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    </form>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/foundation.js"></script>
    <script src="Scripts/foundation.reveal.js"></script>
    <script>
        $(document).foundation({
            reveal: {
                animation: 'fadeAndPop',
                animation_speed: 1000,
                close_on_background_click: true,
                close_on_esc: true,
                dismiss_modal_class: 'close-reveal-modal',
                bg_class: 'reveal-modal-bg',
                open: function () { console.log('fired from settings'); },
                opened: function () { },
                close: function () { },
                closed: function () { },
                bg: $('.reveal-modal-bg'),
                css: {
                    open: {
                        'opacity': 0,
                        'visibility': 'visible',
                        'display': 'block'
                    },
                    close: {
                        'opacity': 1,
                        'visibility': 'hidden',
                        'display': 'none'
                    }
                }
            }
        });
    </script>
</body>
</html>
            

         

Foundation 5revealjavascript

I've tried every way I know of including your documentation for the javascript option changes for Foundation 5 to get reveal options to work. The reveal wasn't working in my normal page so a create a simple page containing only a button and a reveal modal div. I can change the options directly in the reveal js but that obviously isn't feasible. I've included the entire code of my test page that isn't working. The link opens the modal every time but the options never work. I've tried several different methods such as calling $('#joinModal').foundation('reveal', 'open', {options}); on click instead of using the data-reveal-id directly on the link...again it opens the modal but no options are ever applied. I've also tried the Foundation 4 method of foundation ('reveal', {}) instead of the new way...no change. Please help!!!

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/custom.modernizr.js"></script>
    <link href="styles/site.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <a href="#" class="oJoin" data-reveal-id="joinModal">Join</a>  
        <div id="joinModal" class="reveal-modal" data-reveal>
        <h2>Awesome. I have it.</h2>
        <p class="lead">Your couch.  It is mine.</p>
        <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    </form>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/foundation.js"></script>
    <script src="Scripts/foundation.reveal.js"></script>
    <script>
        $(document).foundation({
            reveal: {
                animation: 'fadeAndPop',
                animation_speed: 1000,
                close_on_background_click: true,
                close_on_esc: true,
                dismiss_modal_class: 'close-reveal-modal',
                bg_class: 'reveal-modal-bg',
                open: function () { console.log('fired from settings'); },
                opened: function () { },
                close: function () { },
                closed: function () { },
                bg: $('.reveal-modal-bg'),
                css: {
                    open: {
                        'opacity': 0,
                        'visibility': 'visible',
                        'display': 'block'
                    },
                    close: {
                        'opacity': 1,
                        'visibility': 'hidden',
                        'display': 'none'
                    }
                }
            }
        });
    </script>
</body>
</html>
            

         
Paul Aldred-Bann over 5 years ago

I'm having the exact same issue, configuring the reveal with the following:

$(document).foundation({
    reveal : {
        animation_speed: 150,
        dismiss_modal_class: 'close-modal',
        close_on_background_click: false
    }
});

This is having no effect whatsoever on my reveal (that I'm opening in script on an event, and not via the attributes).

Paul Aldred-Bann over 5 years ago

This is down to the custom configuration options not extending the core options, I've submitted a pull request via Github here https://github.com/zurb/foundation/pull/3743 - the line was commented out (not sure whether there is a reason for this).

I cloned it locally and made the change and now all my custom configs are working correctly.

Rob Boyle over 5 years ago

Just signed up to follow this. I've been upgrading my code to run off F5 and I use reveal for a few key features so am really keen to see this resolved. :)

Cesar Palafox over 5 years ago

I have the same problem/need for my application, Paul, let's hope that your PR is accepted soon! thanks for the work!

Justin Burrow over 5 years ago

Nice find Paul! As from Github I simply added "$.extend(true, this.settings, method, options);" to the reveal init to make it look like below. All option are now working! Thanx!!

 init : function (scope, method, options) {
      Foundation.inherit(this, 'delay');
      $.extend(true, this.settings, method, options);
      this.bindings(method, options);
    }

Daniel Casadevall Pino over 5 years ago

A solution to this, without having to change any source code, is to set the options object in the data property "reveal-init" of the modal, before initializing it like this:

$('#codeModal').data('reveal-init', {
    animation: 'fadeAndPop',
    animation_speed: 250,
    close_on_background_click: false,
    close_on_esc: false,
    dismiss_modal_class: 'close-reveal-modal',
    bg_class: 'reveal-modal-bg',
    bg : $('.reveal-modal-bg'),
    css : {
        open : {
            'opacity': 0,
            'visibility': 'visible',
            'display' : 'block'
        },
        close : {
            'opacity': 1,
            'visibility': 'hidden',
            'display': 'none'
        }
    }
});

$('#codeModal').foundation('reveal', 'open');

Paul Todd over 5 years ago

Hi Guys,

I ran into the same problem people are reporting above - opening a modal programaticallyh but even with the fix suggested above by Justin it still did not work.

Basically I have some html code which is a modal and I create it then load it into the DOM and then run
$("#myModal", this.el).foundation("reveal", "open"); to open the modal.

This does not work and reports that css is undefined
"Uncaught TypeError: Cannot read property 'css' of undefined foundation.reveal.js:160"

Debugging the code it looks like the problem is actually in the bindings method of foundation.js where the

   if (typeof method === 'string') {
      return this[method].call(this, options);
    }

code should be moved to after the code that sets up the initializing data into the element.

so the final code for fountation.js:bindings looks like

  bindings : function (method, options) {
    var self = this,
        should_bind_events = !S(this).data(this.name + '-init');

    if (S(this.scope).is('[data-' + this.name +']')) {
      S(this.scope).data(this.name + '-init', $.extend({}, this.settings, (options || method), this.data_options(S(this.scope))));

      if (should_bind_events) {
        this.events(this.scope);
      }

    } else {
      S('[data-' + this.name + ']', this.scope).each(function () {
        var should_bind_events = !S(this).data(self.name + '-init');

        S(this).data(self.name + '-init', $.extend({}, self.settings, (options || method), self.data_options(S(this))));

        if (should_bind_events) {
          self.events(this);
        }
      });
    }

    if (typeof method === 'string') {
      return this[method].call(this, options);
    }

  }

At some point I will raise a PR to fix this but incase anyone has the same problem this possibly a solution.

Brian Tsai over 5 years ago

@Paul Todd,

i've been having problems where if the result of your ajax call renders a link which the programatically opens reveal, you are unable to click the close button or the backdrop to close the reveal dialog; you end up with an error

TypeError: settings is undefined
bg_clicked = $(e.target)[0] === $('.' + settings.bg_class)[0];

your fix works for me; have you issued a pull request yet?

Michael Oakley over 5 years ago

It looks like this is fixed in version 5.0.3. Thanks @Paul Aldred-Bann and @Justin Burrow.
Now is there a way to to modify the Reveal options using html5 data attributes?

Something like this doesn't seem to work. I still see the fade and pop animation.

<a data-effect="modal"  data-reveal-id="myModal" data-options="animation:'none'" >Open</a>

<div id="myModal" class="reveal-modal" data-reveal>
...modal content...
</div>

Richard Holmes over 5 years ago

I've just upgrade to 5.1.1 and am now facing this problem but Daniels answer has solved it. I skipped version 5.0.3 so was it fixed and is now broken again?

abdessamad idrissi over 5 years ago

For me this works;

<div id="tc_modal" class="reveal-modal small" data-reveal data-options="close_on_background_click: false;">
    <div class="row">
        <div class="large-12 columns bg-stripes-y">
            <h3 class="tc_title">dassad</h3>
        </div>
        <div class="large-12 columns tc_content">
            asdasd
        </div>
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

Mark Carranza over 5 years ago

using version 5.2.2 foundation.min.js

can't get (...).foundation('reveal', 'open', { close_on_background_click: false} ); to work

abdessamad idrissi's fix works.

The url: option works fine,
(...).foundation('reveal', 'open', { url: 'folder/somefile.php'} );

but not close_on_background_click: false in JavaScript options.

Yogesh Solanki over 3 years ago

Working fine for me.

<div id="foundationModal" class="reveal-modal " data-reveal data-reveal-init data-options="close_on_background_click:false; close_on_esc: false;">

//your content

</div>