Magnific Popup focus button on open

Question

I'm using the Magnific Popup plugin and I would like to make my main action button (Save), focused when the pop up opens so that if a user clicks the enter key, it simply triggers a click event.

I tried doing the following on the console with no luck:

$('.popup-modal-save').focus();

Is there a way of doing this without using a key down event listener?

Here is a link to my JSFiddle: https://jsfiddle.net/dwjfq1gp/25/

Answer 1

you should use events to focus on save button when popup opened. fiddle

$('.popup-modal').magnificPopup({
   ...
    callbacks: {
        open: function() {
                $('.popup-modal-save').focus();
        },
    }
});

Answer 2

You actually need to listen the keypress event for that. And when the modal is opened then you need to attach the focus event. Here is a working fiddle https://jsfiddle.net/2fb3d841/1/

// I've just added this
callbacks: {
    open: function() {
            $('.popup-modal-save').focus();
            $(document).keypress(function(e){
              if (e.which == 13){
                  $(".popup-modal-save").click();
                  $.magnificPopup.close();
              }
            });
    },
}