javascript - 带有模态模式的移动设备上的 PNotify 确认模块

Question

我正在尝试在移动设备上使用模态确认对话框，但它似乎不起作用。

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

请参阅我的 JSFiddle。如果您缩小页面并刷新以运行，您会发现它不起作用。将部分拉伸得足够大，它将进入视野。

当 Shrunk 看起来像这样时：

想让它看起来像这样...

我的例子做错了什么来完成这项工作？

这是我的参考代码：

$(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 中的一个错误。添加这个 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;
      }
    }
}