javascript - 使 javascript 警告/确认对话框更加可见(尤其是在 Google Chrome 浏览器中)

Question

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

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

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

Answer 1

一种选择是使用 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 使用框架，这会抵消部分效果，但您可以了解它在整个网页上的功能。)