Menu icon Foundation
Prevent modal dialog from Closing, when clicking anywhere in the page

Currently, when I click anywhere outside in the page, the modal dialog closes

I understand , how a modal dialog is intended to work. But, is there a quick configuration available to prevent this from happening

modaldialog

Currently, when I click anywhere outside in the page, the modal dialog closes

I understand , how a modal dialog is intended to work. But, is there a quick configuration available to prevent this from happening

Clay Hymas over 5 years ago

Found the answer on the docs page.

 {
  animation: 'fadeAndPop',
  animation_speed: 250,
  close_on_background_click: true,             // LOOK HERE
  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'
    }
  }
}

David Reese about 4 years ago

In case anyone is trying to force the Foundation Reveal modal to stay open, programmatically, after it has already been open — for instance, you want to allow closing on background/escape, except when you're running an ajax request from the modal — you can set the options dynamically like this.

$('#modal').data('revealInit').close_on_background_click = false 
$('#modal').data('revealInit').close_on_esc = false 

And then set them to true when you're done. (Note that apparently the key "revealInit" could change, maybe something to do with namespaces? not sure when that happens.)

[edit]

Now that I say that, seems like this is the better solution:

 Foundation.libs.reveal.locked = true