javascript - 打开时的放大弹出焦点按钮

Question

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

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

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

有没有一种方法可以在不使用按键事件监听器的情况下执行此操作？

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

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