我试图在移动设备上使用模态确认对话框,但它似乎无法正常工作。
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,但是在非模态模式下。请注意,如果缩小页面并刷新它看起来是正确的。
答案 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;
}
}
}