Chrome中Javascript警告框位置不在中心

Question

当我使用JavaScript警报时，它会出现在浏览器顶部，而不是中央位置。如何控制并使用JavaScript使其居中？在Firefox和IE中，它运行得非常好。我的当前Chrome版本为30.0.1599.66。

我想将警报框定位在浏览器的确切中心，适用于所有类型的浏览器和所有版本。请帮帮我......

如果有其他简单的提供居中提示的想法，也会受到赞赏...

- AtanuCSE

Answer 1

仅依赖浏览器的警告信息并不是一个好选择，因为它们变化很快，并且在不同的浏览器中可能不一样。

我发现使用Alertify JS可以满足所有提示需求，您可以根据自己的需要进行定制，效果很棒。

- Vikram Tiwari

---

我不同意，警告框、滚动条、HTML5 属性处理应该由浏览器来确定，这是最快、最可靠的方式。 - Ayyash

@Ayyash 同意！但有时浏览器并没有这个内在功能，并且在不同的浏览器之间也会有所不同。为了在设备和浏览器之间保持一致性，最好将它们定制为自己的。此外，许多浏览器正在采用更好的做法，但是，如果我们对提供的内容感到满意，那么作为人类还有什么用呢？ :) - Vikram Tiwari

设计界面时，人们经常忽略了一些事情，浏览器之间的一致性并没有什么价值，因为用户通常会坚持使用一个浏览器，并在许多处理方式不同的网站之间跳转。换句话说，一旦上传你的网站，你就已经破坏了用户的一致性体验 :) 给他们一些一致性的东西，让警告框成为他们习惯的东西。 - Ayyash

@Ayyash 绝对正确。如果所有网站都显示自己的警报，那将是奇怪的。然而，开发人员已经开发了一个很好的插件，他们应该受到赞扬。然而，必须避免使用该插件。 - Amit

Answer 2

由于这是默认的盒子，您无法对其进行定位，但是您可以创建自己的盒子并相应地对其进行定位。 尝试这个 http://jqueryui.com/dialog/

- Manu

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!');

- Carlos Sousa

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强制弹出窗口，请尝试以下内容。 弹出窗口示例

- Tomasz Kapłoński

---

Div对我没用，我需要弹出警告框。感谢你的信息。 - AtanuCSE

实际上，在像FF、Chrome和Opera这样的现代浏览器中，警告框实际上是以与div相同的方式呈现的 - 它们不再是弹出框。但是，如果你真的需要一个弹出框，可以尝试我在编辑中提出的方法。 - Tomasz Kapłoński