Return focus after modal closes

Question

I am using the Venobox modal and need ADA support. I've tweaked a few things to make it work well, but I need one more piece. I need to focus to return to the element a.venobox that opened the modal when the close button is pressed.

In another words, if the user was only tabbing through the site, opened the modal, then closed it, and tabbed again it would pick up where they left off.

I tried inserting a tabindex but it only works for the first tab, then jumps back to the top of the page. Then, I tried adding something to hold the focus then return to it when closed, but I'm not the best with js.

Thanks

My Current Code:

$(document).ready(function(){
  $('.venobox').venobox().click(function() {    
    $('.vbox-close').attr('tabindex', '1').attr('title','Close Modal');

    var focusReturn = $(this).focus();    
    $(".vbox-close").click(function(){
      return focusReturn;
    });

  });
});

see https://stackoverflow.com/a/57099835/339440 – Stephen R Jul 18 '19 at 17:48 — Stephen R, Jul 18 '19 at 17:48

score 1 · Answer 1 · edited May 23 '17 at 12:29

Setting var focusReturn = $(this).focus(); will only set your custom variable to the return value of the focus function (which is the element it was called on). Additionally, the return value in an event handler is only used to prevent default event propagation.

What you probably meant to do was var focusReturn = $(this).focus;, then call it with focusReturn(); inside the click-handler. However, I'd recommend against this as it's a functional approach to a non-functional problem. And writing functionally in non-functional languages such as javascript is difficult to read.

However, there is a more common (and more common sense) way to do this:

// don't need this line // var focusReturn = $(this).focus();    
$(".vbox-close").click($.proxy(function() {
  $(this).focus();
}, this));

jQuery's proxy function is used to change the closure context in which a function executes.

(Possibly) another way to improve this is to place that event handler on a close event on .vbox-close, but I'm not familiar enough with this plugin to know what events it supports. It's certainly worth investigating though, as a dialog box c(sh)ould presumably be closed in more ways than just clicking on the close button.

score 0 · Answer 2 · answered Jun 19 '14 at 16:38

I ended up having to use a setTimeout for it to capture the focus and not reset it when it unloaded the modal. For anybody else who might need this, here it is.

$(document).ready(function(){
    $('.venobox').venobox().click(function() {

        focusclick = this;

        $('.vbox-close').click(function() {    
            setTimeout("focusclick.focus()",500);
        });   

    });    
});

Return focus after modal closes

2 Answers2