如何在 Pnotify 中设置按钮

How to set foucs on button in Pnotify

本文关键字：设置 按钮 Pnotify      更新时间：2023-09-26

我在我的项目中使用 pnotify alert jquery。 我正在尝试在弹出对话框时将焦点设置为"确定"按钮。 这样用户只需按 Enter 或空格键即可关闭对话框。 但无法做到这一点。

这是通知的链接
我的代码 - 

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

使用after_open回调。查看此演示。

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

如果需要为所有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({...});

演示

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>

相关文章：