How to set foucs on button in Pnotify

问题

i am using pnotify alert jquery in my project. i am trying to set focus on ok button when dialog box popup. so that user can simply hit enter or space bar to close the dialog box. but unable to do that.

This is link of pnotify
My code -

 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");
                }
            });

        }

回答1:

Use after_open callback. Check this demo.

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

回答2:

If need change this for all PNotify, I use next solution:

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>

来源：https://stackoverflow.com/questions/28067554/how-to-set-foucs-on-button-in-pnotify