使用模态模式在移动设备上PNotify Confirm Module

时间:2017-05-13 03:18:11

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

我试图在移动设备上使用模态确认对话框,但它似乎无法正常工作。

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

请参阅我的JSFiddle。如果缩小页面并刷新以运行,您将看到它无法正常工作。拉伸该部分足够大,它将进入视野。

当Shrunk看起来像这样:enter image description here

希望它看起来像这样...... enter image description here

我的例子让我做错了怎么办?

以下是我的参考代码:

$(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/

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

将此添加到CSS顶部:

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