TechQA.

PNotify Modal Confirm Dialog keeps the page inaccessible

3.4k views Asked by At

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.

javascript jquery twitter-bootstrap pnotify
Original Q&A
3

There are 3 answers

0
Iqbal On BEST ANSWER

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();
        }
    }
0
Andrius Jasiukevičius On

Even if your undoModal works now, you have no guarantee it will work with future PNotify versions. If any attributes will be appended to the overlay DIV - it will stop working. So never stick to the content of elements, but use more elegant way to remove unwanted elements:

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

Just ran into this and it's a confirmed bug.

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

The workaround (for now) is to have the History Module loaded on the page. It can be turned on or off in the options and still work.

history: { history: false }

And by work, I mean it sets display: none on the added <div but doesn't delete it.

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

I tried it out and every modal left the overlay div right after the <body> tag so they just pile up.

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in PNOTIFY

Popular Questions

Trending Questions