Question

当我使用javascript警报时，它会在浏览器的顶部，在当前版本的chrome中不在中心位置。如何控制它，并使其以 javascript 为中心。在Firefox和IE中，它运行得很好。我目前的Chrome版本30.0.1599.66

我希望将警报框放在浏览器的所有类型的浏览器和所有版本的确切中心位置。请帮助........

关于提供警报以使其可以居中的任何其他简单想法也会很明显......

Answer 1

依赖浏览器提供警报不是一个好的选择。它们变化很快，对于不同的浏览器也不一样。

我发现有用的是使用Alertify JS来满足所有警报需求。您可以根据自己的需要进行自定义，无论如何它看起来很棒。

Answer 2

由于它是一个默认框，你无法定位它，虽然你可以创建自己的并相应地定位它。试试这个 http://jqueryui.com/dialog/

Answer 3

您希望alert（）对话框位于中心位置。试试这个简单的script.js

// alertMX -  improve alert()

$("<style type='text/css'>#boxMX{display:none;background: #333;padding: 10px;border: 2px solid #ddd;float: left;font-size: 1.2em;position: fixed;top: 50%; left: 50%;z-index: 99999;box-shadow: 0px 0px 20px #999; -moz-box-shadow: 0px 0px 20px #999; -webkit-box-shadow: 0px 0px 20px #999; border-radius:6px 6px 6px 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; font:13px Arial, Helvetica, sans-serif; padding:6px 6px 4px;width:300px; color: white;}</style>").appendTo("head");

function alertMX(t){
$( "body" ).append( $( "<div id='boxMX'><p class='msgMX'></p><p>CLOSE</p></div>" ) );
$('.msgMX').text(t); var popMargTop = ($('#boxMX').height() + 24) / 2, popMargLeft = ($('#boxMX').width() + 24) / 2; 
$('#boxMX').css({ 'margin-top' : -popMargTop,'margin-left' : -popMargLeft}).fadeIn(600);
$("#boxMX").click(function() { $(this).remove(); });  };

包含Jquery并使用javascript：

alertMX('Hello!');

Answer 4

您无法控制浏览器显示警报的方式。相反，您应该编写自己的函数来显示带有消息的div。它可能是这样的：

function customAlert(msg) {
var alertDiv = "<div style='position: fixed; top: 20px; left: 20px;'>"+msg+"</div>";
document.getElementsByTagName('body')[0].appendChild(alertDiv);
}

当然，你应该在那里做一些计算，以正确地将div放在你想要的位置。如果你使用jQuery或其他一些js框架也会容易得多......

[编辑] 如果你想从JS强制弹出，尝试类似的东西。 Popup example

Javascript警报位置不在chrome的中心位置

4 个答案: