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

How can I display a custom alert at the top of the screen on a mobile browser?

本文关键字：显示 顶部 自定义 屏幕 移动 浏览器      更新时间：2023-09-26

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

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

第一件事是找到浏览器是否是移动的，或者现在你可以用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;
}

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

在 CSS 中固定定位？

position:fixed;

W3学校文章

相关文章：