1

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

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

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

4

1 回答 1

3

一种选择是使用 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')orconfirm('Continue?')
而是调用alrt('Hello World')orcnfrm('Continue?')

这里的所有都是它的。这将创建一个覆盖整个页面的临时着色覆盖层，并在其顶部显示警报/确认对话框，使对话框更加明显。

请参阅以下示例： http: //jsfiddle.net/wcU3f/1/
（尽管 jsfiddle 使用框架，这会抵消部分效果，但您会了解它如何在完整网页上运行。）

于 2013-11-07T19:29:18.460 回答