3

我在网页上使用 alertify.js 给用户错误警告，例如“无效密码”等。但是当使用移动浏览器时，我想在他们的屏幕顶部而不是页面顶部显示警报。即使只是在打开的键盘上方也可以。在 CSS 中，有人知道该怎么做吗？

这就是我现在正在使用的。但这使它距页面顶部10px。如果他们向下滚动，用户将看不到它。并将它们留在底部，如果它们打开键盘，则隐藏在其后面。

.alertify-logs {
    top: 10px;
    right: 10px;
}

编辑： 键盘实际上将页面顶部向上移动，因此地址栏隐藏了警报。在 CSS 中添加固定定位似乎正在发挥作用，开放式键盘将其推得更高。

我的解决方案：

var isMobile = false;
//test for mobile device/browser
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
    isMobile = true;
}

输出一些错误信息时：

if(isMobile){
    //get top of viewable screen y-coordinate
    var scrollY = window.pageYOffset;
    //output error
    alertify.error("Password is incorrect.");
    //adjust error placement
    $(".alertify-logs").css("top", scrollY+"px");
}

错误消息的这种移动是有效的，因为它在离开页面之前会在屏幕上停留几秒钟。

4

2 回答 2

2

在 CSS 中固定定位？

position:fixed;

W3 学校文章

于 2014-12-23T16:16:59.697 回答
2

首先要确定浏览器是移动的还是现在可以使用 css 媒体查询或纤细的 javascript 完成。Javascript更好。设置窗口调整大小事件侦听器并使用 javascript innerWidth 或 innerHeight。我不确定你页面的其余部分是如何布局的，但试试吧。<div id="bar">put content here</div>

CSS：

#bar
{
Position:fixed;
Left:0;
Right:0;
Top:0;
Height:2em;
}

如果这不起作用，请告诉我，我会做更多的工作。希望这可以帮助。

于 2014-12-23T16:49:02.480 回答