打开时的 Magnific Popup 焦点按钮

Question

我正在使用 Magnific Popup 插件，我想让我的主要操作按钮（保存）在弹出窗口打开时聚焦，这样如果用户点击回车键，它只会触发点击事件。

我尝试在控制台上执行以下操作，但没有成功：

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

有没有一种方法可以不使用按键事件侦听器来执行此操作？

这是我的 JSFiddle 的 link：https://jsfiddle.net/dwjfq1gp/25/

Answer 1

弹出窗口打开时，您应该使用事件将焦点放在保存按钮上。 fiddle

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

Answer 2

您实际上需要为此监听按键事件。当模式打开时，您需要附加焦点事件。这是一个工作 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();
              }
            });
    },
}

Answer 3

您可以使用 magnific-popup 的焦点选项。

$.magnificPopup.open({
    items : {
    type : 'inline',
    src : '#idOfInlinePopUP'
    },
    focus: '#closeButton',                                                                   
    closeOnBgClick:false,                                                                        
    enableEscapeKey:false
    }, 0);

按钮代码：

<input type="button" value="close" onclick="$.magnificPopup.close();" id="closeButton">

在此代码中，焦点选项包含您要打开的按钮的 ID。并且 src 必须包含内联弹出窗口的 id。

如果您能够成功打开弹出窗口，那么您只需要添加带有您要单击的按钮 ID 的焦点属性，然后单击回车。

在这个答案中，打开弹出窗口时，默认焦点将位于 closeButton 上。单击此按钮，弹出窗口将关闭。

打开时的 Magnific Popup 焦点按钮

Magnific Popup focus button on open

javascript

jquery

modal-dialog

popup

magnific-popup