打开时的 Magnific Popup 焦点按钮答案

【问题标题】：Magnific Popup focus button on open打开时的 Magnific Popup 焦点按钮
【发布时间】：2019-06-06 14:35:56
【问题描述】：

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

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

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

有没有办法在不使用按键事件监听器的情况下做到这一点？

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

【问题讨论】：

标签： javascript jquery modal-dialog popup magnific-popup

【解决方案1】：

您可以使用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 上。单击此按钮后，弹出窗口将关闭。

【讨论】：

【解决方案2】：

当弹出窗口打开时，您应该使用事件来关注保存按钮。 fiddle

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

【讨论】：

【解决方案3】：

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

【讨论】：