Question

我在网页上使用alertify.js来向用户提供错误警告，例如＆＃34;无效密码＆＃34;但是当使用移动浏览器时，我想在屏幕顶部显示警报而不是页面顶部。即使只是打开一个键盘就好了。在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中的定位？

position:fixed;

W3 Schools Article

Answer 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;
}

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

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

2 个答案: