CODEWITHSUNDEEP
javascriptjquerymodal-dialogfocus
user3754217
user3754217

Reputation: 21

Return focus after modal closes

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;
    });

  });
});

Upvotes: 2

Views: 10234

Answers (2)

user3754217
user3754217

Reputation: 21

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);
        });   

    });    
});

Upvotes: 0

blgt
blgt

Reputation: 8205

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.

Upvotes: 1

Related Questions