Foundation 5 Reveal modal, remove background

Question

I'm having some issues trying to remove the reveal modal background

The documentation gives several options but none of them work: http://foundation.zurb.com/docs/components/reveal.html

Remove background:

<div class="reveal-modal-bg" style="display: none"></div>

Optional Javascript Configuration:

Reveal options can only be passed in during initialization at this time. However, you can bind to the open, opened, close, and closed events.

I tried returning this object literal in the event callback, but that doesn't work:

$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
  return {bg_class: 'noBackground'}
});

{

  animation: 'fadeAndPop',
  animation_speed: 250,
  close_on_background_click: true,
  dismiss_modal_class: 'close-reveal-modal',
  bg_class: 'reveal-modal-bg',
  root_element: 'body',
  bg : $('.reveal-modal-bg'),
  css : {
    open : {
      'opacity': 0,
      'visibility': 'visible',
      'display' : 'block'
    },
    close : {
      'opacity': 1,
      'visibility': 'hidden',
      'display': 'none'
    }
  }
}

Can you please help?

thx,

Nathaniel Flick Nathaniel Flick · Accepted Answer · 2014-12-28T09:09:15

Don't use display: none, just use css and set the background color to transparent in your css (you need to load your css after foundation's in order to override its styles) - though I'm not sure why you'd want to?:

.reveal-modal {
background-color: transparent;}

Foundation 5 Reveal modal, remove background

2 Answers