javascript - 如何在移动浏览器的屏幕顶部显示自定义提醒？

Question

我在网页上使用 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");
}

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

Answer 1

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

CSS:

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

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