如何在 Pnotify 中的按钮上设置焦点答案

【问题标题】：How to set foucs on button in Pnotify如何在 Pnotify 中的按钮上设置焦点
【发布时间】：2015-03-19 23:48:53
【问题描述】：

我在我的项目中使用 pnotify alert jquery。我试图在弹出对话框时将焦点设置在确定按钮上。这样用户就可以简单地按回车键或空格键来关闭对话框。但做不到。

 function AlertAskOk(Heading, Message, type, okclick) {
            var modal_overlay;

            info_box = $.pnotify({
                title: Heading,
                text: Message,
                type: type,
                buttons: 'ok',
                okclick: okclick,

                icon: "picon picon-object-order-raise",
                delay: 20000,
                history: false,
                stack: false,
                // nonblock: true,

                before_open: function (pnotify) {

                    //  $("btn-inverse").focus();
                    // Position this notice in the center of the screen.
                    pnotify.css({
                        "top": ($(window).height() / 2) - (pnotify.height() / 2),
                        "left": ($(window).width() / 2) - (pnotify.width() / 2)
                    });

                    // Make a modal screen overlay.
                    modal_overlay = $("<div />", {
                        "class": "ui-widget-overlay",
                        "css": {
                            "display": "none",
                            "position": "fixed",
                            "top": "0",
                            "width": "5000px",
                            "bottom": "0",
                            "right": "0",
                            "left": "0",
                            "cursor": "pointer"

                        }
                    }).appendTo("body").fadeIn("fast");
                },

                //....

                after_open: function (ui) {
        $(".btn", ui.container).focus();
    },
                //....

                before_close: function () {
                    modal_overlay.fadeOut("fast");
                }
            });

        }

【问题讨论】：

标签： javascript jquery jquery-plugins modal-dialog pnotify

【解决方案1】：

使用after_open回调。检查这个demo。

new PNotify({
   //....
    after_open: function (notify) {
        $(".btn-class", notify.container).focus();
    }
   //....
});

【讨论】：

@dvirus 你的按钮有btn 类吗？你也可以添加你的 html，或者创建一个小提琴吗？

【解决方案2】：

如果需要为所有 PNotify 更改此设置，我使用下一个解决方案：

PNotify.prototype.options.confirm.buttons[0].addClass = 'btn-pnotify-ok';

PNotify.prototype.modules.confirm.afterOpen = function(notice, options){
    if (options.prompt) {
        this.prompt.focus();
    } else {
        notice.container
            .keyup(({keyCode}) => {
                if (keyCode === 27) {
                    notice.remove();
                }
            })
            .find('.btn-pnotify-ok')
            .focus();
    }
};

new PNotify({...}); 
...
new PNotify({...});

Demo

PNotify.prototype.options.styling = 'bootstrap3';

PNotify.prototype.options.confirm.buttons[0].addClass = 'btn-pnotify-ok';

PNotify.prototype.modules.confirm.afterOpen = function(notice, options){
    if (options.prompt) {
        this.prompt.focus();
    } else {
        notice.container
            .keyup(({keyCode}) => {
                if (keyCode === 27) {
                    notice.remove();
                }
            })
            .find('.btn-pnotify-ok')
            .focus();
    }
};

$("#btn1").click(function () {
    new PNotify({
        title: 'Focus on open #1',
        text: 'Press [enter] or [esc]!',
        hide: false,
        stack: {
            'modal': true,
            'dir1': 'down',
            'dir2': 'right',
        },
        confirm: {
            confirm: true,
        },
        buttons: {
            closer: false,
            sticker: false
        },
    });
});

$("#btn2").click(function () {
    new PNotify({
        title: 'Focus on open #2',
        text: 'Press [enter] or [esc]!',
        hide: false,
        stack: {
            'modal': true,
            'dir1': 'down',
            'dir2': 'right',
        },
        confirm: {
            confirm: true,
        },
        buttons: {
            closer: false,
            sticker: false
        },
    });
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.confirm.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.css">

<button id="btn1" class="btn btn-default">Confirm Dialog #1</button>
<button id="btn2" class="btn btn-default">Confirm Dialog #2</button>

【讨论】：