Search code examples
javascriptjquerytwitter-bootstrappnotify

PNotify Modal Confirm Dialog keeps the page inaccessible

I am using PNotify 3 with Bootstrap 3. I am trying to use an example given on site 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>

Everything working fine but when I close the dialog clicking on any button (Ok/Cancle), the dialog closes but the page don't change to it normal state as it was before clicking the button.

During my investigation to resolve this issue, I found that, when I click the button PNotify adding one line just below to <body> tag:

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

after closing the dialog PNotify changes this code block to:

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

means display: block changed to display: none

But the issue is that PNotify does not make any changes even after closing the dialog in my project.

Any help will be appreciated.

Solution

  • Although I could not get any response so for. But I got a non-fair solution by my self. using the following code:

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