使javascript警报/确认对话框更加可见(特别是在Google Chrome浏览器中）

Make javascript Alert/Confirm dialogs more visible (especially in the Google Chrome browser)

本文关键字：特别是 Google Chrome 浏览器 警报 javascript 确认 对话框      更新时间：2023-09-26

在最新版本的Google Chrome浏览器中，javascript警报对话框和确认对话框不是很明显。它们在出现时不会发出声音，它们位于屏幕顶部附近，而且它们是白色的，因此它们很容易与大多数网站融合。

这会导致用户没有意识到警报的存在，并且由于警报会冻结浏览器直到关闭，因此用户很容易认为他们的浏览器已冻结。

有哪些方法可以让javascript Alert更加突出？

一种选择是使用div 覆盖创建自己的警报。但是，对"确认"对话框执行此操作会更加困难，因为您通常希望停止所有执行，直到用户在"确认"对话框中选择"确定"或"取消"。

一个很好的选项如下，它允许您继续使用浏览器的"警报"和"确认"对话框：

创建这些函数（使用Jquery，但可以修改为Javascript）：

function alrt(msg) {
    var tint = $('<div class="PopupBgTint"></div>');
    tint.appendTo('body');
    alert(msg);
    tint.remove();
}
function cnfrm(msg) {
    var tint = $('<div class="PopupBgTint"></div>');
    tint.appendTo('body');
    var rtrn = confirm(msg);
    tint.remove();
    return rtrn;
}

在你的CSS文件中，像这样定义PopupBgTint：

.PopupBgTint
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index:99999;
}

然后，而不是打电话
alert('Hello World')或confirm('Continue?')
而是致电alrt('Hello World')或cnfrm('Continue?')

仅此而已。这将创建一个覆盖整个页面的临时有色叠加层，其顶部有"警报/确认"对话框，使对话框更加可见。

请参阅以下示例：
http://jsfiddle.net/wcU3f/1/（JSFIDDLE虽然使用框架，这否定了部分效果，但你知道它在完整网页上是如何工作的。

相关文章：