Question

假设我有一条警告信息：

 alert("Message");

执行此命令时，会弹出一个警告框，但消息对齐到警告框的左侧。

有没有办法将此消息集中在警告框中？

Answer 1

如果您的提示消息是静态的，请在消息开头添加多个'\ t'。

alert('\t Quantity should be less than Remaining Quantity! \n \t\t\t Remaining Quantity');

这里\ n用于打破消息并放在下一行

Answer 2

嗯，你应该知道的一件事是你不能设置警报框的样式。它是系统对象而不是css的东西。

如果您仍想使用提醒并希望将文字从左向右移动，请使用\t这是一个标签。您可以计算出您将在一行中使用的字符数，然后将文本包含在\t中。

例如：

\t This text will be centered \t\n
\t in the middle of the alert \t

它并不完美，但它与将文本移动到alertBox中心的距离非常接近。

\t适用于Firefox，但不适用于Chrome。我喜欢Chrome，但作为网络开发者，这是一个痛苦的问题。

仅供参考：您也可以创建自己的。例如，

jQuery UI Dialog

看看这里：DEMO

这些天我用来显示消息的最好的事情是使用Toast消息。它们弹出，在漂亮的盒子里展示你的信息，然后以流畅的方式弹出。

看看的 MATERIALIZE CSS TOASTS

Answer 3

您应该能够编辑Javascript的CSS文件并使用Text-alight集中内容。

#popup_container {
  font-family: Arial, sans-serif;
  font-size: 15px;
  min-width: 300px; /* Dialog will be no smaller than this */
  max-width: 600px; /* Dialog will wrap after this width */
  background: #FFF;
  border: solid 5px #999;
  **text-align:center !important;**
  color: #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

Answer 4

这是一个使用自定义代码的非常简单的解决方案。只需单击消息框即可将其关闭。警报不再阻塞，而是以回调为导向。消息框也始终位于窗口的中心。

http://jsfiddle.net/BUmc4/2/

JAVASCRIPT

(function() {
    window.alert = function(html, callback) {
        var messagebox = document.getElementById("messagebox");
        messagebox.style.display = "block";
        var message = document.getElementById("message");
        message.innerHTML = html;
        messagebox.attributes.callback = callback;
    };
}());

alert("Hello World", function() {
    alert("How are you?");
});

HTML

<div id="messagebox" onclick="this.style.display='none';this.attributes.callback && this.attributes.callback()">    
    <div id="message">
    </div>
</div>

<div>Can you see me?</div>
<div>Can you see me?</div>
<div>Can you see me?</div>
<div>Can you see me?</div>
<div>Can you see me?</div>

CSS

#messagebox {
    text-align : center;
    position : absolute;
    width : 300px;
    height : 300px;
    background : yellow;
    color : black;
    top : 50%;
    left : 50%;
    margin : -150px;
    z-index : 5;
}

#messagebox #message {
    overflow : auto;
}

如何将消息集中在JavaScript中的警告框中？

4 个答案: