Confirm + Animate not working together

NightOwl888 commented 8 years ago

I attempted to combine these two modules as I don't see any particular reason why a modal confirm dialog shouldn't be able to be animated. However, it causes the confirm dialog to fail when a button is clicked (the confirm dialog and overlay are not hidden), and the animation effects are not working in this case.

Here is a demo of the problem.

<html>
<head>

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.0.0/pnotify.min.css" />

    <script src="//cdn.jsdelivr.net/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.0.0/pnotify.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.0.0/pnotify.confirm.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.0.0/pnotify.animate.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.0.0/pnotify.history.min.js"></script>

</head>
<body>

<button class="btn btn-default source" onclick="(new PNotify({
                    title: 'Confirmation Needed',
                    text: 'Are you sure?',
                    icon: 'glyphicon glyphicon-question-sign',
                    styling: 'bootstrap3',
                    width: '330',
                    hide: false,
                    confirm: {
                        confirm: true
                    },
                    buttons: {
                        closer: false,
                        sticker: false
                    },
                    history: {
                        history: false
                    },

                    // Adding animation effects causes
                    // the dialog not to go away when
                    // a button is clicked. Leaving this
                    // commented works fine.

                    //animate: {
                    //  animate: true,
                    //  in_class: 'rotateInDownLeft',
                    //  out_class: 'rotateOutUpRight'
                    //},

                    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.');
                });">Modal Confirm Dialog</button>

</body>
</html>

hperrin commented 6 years ago

This may have been a problem with Animate.css's code. It looks to be working in v4, so I'm going to close it.

tabacitu commented 5 years ago

FYI, I just encountered the same bug, using pnotify 4.0.0 and animate.css 3.7.2. Happy to come back and give more details, screencast or whatever helps.

sciactive / pnotify

Confirm + Animate not working together #224