带有模态模式的移动设备上的 PNotify 确认模块答案

【问题标题】：PNotify Confirm Module on Mobile with Modal mode带有模态模式的移动设备上的 PNotify 确认模块
【发布时间】：2017-10-12 10:20:50
【问题描述】：

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

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/

【问题讨论】：

还没有人能解决这个问题？
我不知道
我在 GitHub 网站上添加了这个 bug：github.com/sciactive/pnotify/issues/336，也许我们可以从创作者那里获得额外的支持。

标签： javascript jquery css twitter-bootstrap-3 pnotify

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在 CSS 的顶部添加：

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

【讨论】：