PNotify 模态确认对话框使页面无法访问

Question

我正在使用 PNotify 3 和 Bootstrap 3。我正在尝试使用网站 PNotify

上给出的示例

<button class="btn btn-default dropdown-toggle" onclick="(new PNotify({
                title: 'Confirmation Needed',
                text: 'Are you sure?',
                icon: 'glyphicon glyphicon-question-sign',
                hide: false,
                confirm: {
                    confirm: true
                },
                buttons: {
                    closer: false,
                    sticker: false
                },
                history: {
                    history: false
                },
                addclass: 'stack-modal',
                stack: {'dir1': 'down', 'dir2': 'right', 'modal': true}
            })).get().on('pnotify.confirm', function(){
                alert('Ok, cool.');
            }).on('pnotify.cancel', function(){
                alert('Oh ok. Chicken, I see.');
            });" data-toggle="dropdown">Modal Confirm Dialog</button>

一切正常，但是当我单击任何按钮关闭对话框时 (Ok/Cancle)，对话框关闭但页面不会像单击按钮之前那样更改为正常状态。

在我调查解决这个问题的过程中，我发现，当我点击按钮 PNotify 在 <body> 标签下方添加一行时：

<div class="ui-pnotify-modal-overlay" style="display: block;"></div>

关闭对话框后 PNotify 将此代码块更改为：

<div class="ui-pnotify-modal-overlay" style="display: none;"></div>

表示display: block改为display: none

但问题是，即使在我的项目中关闭对话框后，PNotify 也没有进行任何更改。

我们将不胜感激。

Answer 1

虽然我无法得到任何回应。但是我自己得到了一个不公平的解决方案。使用以下代码：

        function undoModal() {
        var elements = document.querySelectorAll('body > *');
        if (elements[0].outerHTML == '<div class="ui-pnotify-modal-overlay" style="display: block;"></div>') {
            elements[0].remove();
        }
    }

Answer 2

即使您的 undoModal 现在可以工作，您也不能保证它可以与未来的 PNotify 版本一起工作。如果任何属性将附加到叠加层 DIV - 它将停止工作。所以永远不要拘泥于元素的内容，而是使用更优雅的方式去除不需要的元素：

function undoModal() {
    $(".ui-pnotify-modal-overlay").remove();
}

Answer 3

只是运行进入这个，这是一个确认的错误。

[Confirm module]The black overlay is'nt removed when the history module isn't used #214

解决方法（目前）是在页面上加载历史模块。它可以在选项中打开或关闭并且仍然有效。

history: { history: false }

工作，我的意思是它在添加的 <div 上设置 display: none 但不会删除它。

<div class='ui-pnotify-modal-overlay' style='display: none;'>

我试过了，每个模态都在 <body> 标签之后离开了叠加层 div，所以它们就堆积起来了。

PNotify 模态确认对话框使页面无法访问

PNotify Modal Confirm Dialog keeps the page inaccessible

javascript

jquery

twitter-bootstrap

pnotify