在最新版本的 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 使用框架,这会抵消部分效果,但您可以了解它在整个网页上的功能。)
关于javascript - 使 javascript 警告/确认对话框更加可见(尤其是在 Google Chrome 浏览器中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19844936/