基于模态的移动PNotify确认模块

Question

我试图使用Modal确认对话框在手机上，但它似乎不起作用。

https://jsfiddle.net/ox0wobsu/11/

请参考我的JSFiddle。如果您缩小页面并刷新以运行，您将看到它不工作。伸展足够大的部分，它就会出现在视野中。

当收缩看起来像这样：

​

希望它看起来像这样..。

​

我的榜样做错了什么？

这是我的代码供参考：

$(document).ready(function(){
    PNotify.prototype.options.styling = "bootstrap3";
    (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.');
        });
});

相反，这里是一个工作的JSFiddle，但在非模态模式下。注意如果您缩小页面并刷新它看起来是正确的。

https://jsfiddle.net/jrseqvf3/1/

Answer 1

看起来这是PNotify中的一个bug。添加这个CSS来修复它：

@media (max-width: 480px) {
  .ui-pnotify-mobile-able.ui-pnotify.stack-modal {
    margin-left: 0;
  }
}

Answer 2

在CSS顶部添加以下内容：

@supports (display: flex) {
    @media (max-width: 480px) {
      .ui-pnotify-mobile-able.ui-pnotify.stack-modal {
        margin-left: 0;
      }
    }
}