Foundation Zurb - Reveal Modal focus

Question

I have a page that uses Foundation Zurb and I have a reveal modal with some fields opening when I press a button. The problem is, everytime I give more tabs than the number of input, instead of the focus going to the first field again (like Jquery dialog does), the focus changes to the button in the background (behind the modal).

Someone knows how to fix this (is this some property I need to have, or some JS code I need to add?)?

I know there is already some discussions over the internet but none that I saw resolve my problem.

Thanks

score 0 · Answer 1 · answered Sep 03 '15 at 23:09

I don't know if this is the best approach but was the only way to do.

The way was:

When open popup create an event "on focus" is created to every tabbed visible components. There, if the tabbed element do not belongs to the popup then the focus is set to the first input
On close, this event is removed

$(document).on('open.fndtn.reveal', '.reveal-modal', function () {
   var $this = $(this);
   $(":tabbable:visible").focus(function(){    
    if($this.find($(this)).length == 0){
     $this.find("input:visible").first().focus(); 
    }
   });   
  });
  
  $(document).on('close.fndtn.reveal', '.reveal-modal', function () {   
   $(":tabbable:visible").unbind('focus');   
  });

Is this the best way?

(Hope that helps someone) Thanks

Foundation Zurb - Reveal Modal focus

1 Answers1