Javascript 如何在移动浏览器的屏幕顶部显示自定义警报？

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

这就是我现在使用的。但这使它从页面顶部的10像素。如果用户已向下滚动，则无法看到它。把它们放在底部，如果它们打开键盘，它就隐藏在后面

.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");
}

---

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

CSS中的固定位置

position:fixed;

---

首先要做的是确定浏览器是移动的，还是现在可以通过css媒体查询或javascript来完成。Javascript更好。设置窗口调整事件侦听器并使用javascript innerWidth或innerHeight。 我不确定页面的其余部分是如何布局的，但请尝试一下条形图。

将内容放在此处

Css:

---

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

我认为这应该行得通，但我意识到发生了什么，必须修正我的问题。当键盘打开时（我想很多人都会这样），键盘实际上会将屏幕顶部推到地址栏后面，因此警报仍然隐藏。谢谢。在今天的下一次机会中，我将对此进行一次尝试，并让您知道它是如何工作的。我感谢你的帮助！在使用了你的答案之后，它似乎起了作用；然而，对我来说，事情并不是这样的。我会发布我所做的，让我的工作方式，我想它。也许有更好的办法。但是你的步骤帮我弄明白了所以谢谢你！

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