如何在JavaScript中将消息置于警告框的中心？

Question

假设我有一个警告信息，例如：

 alert("Message");

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

有没有办法将此消息居中显示在警告框内？

当执行该命令时，警报框弹出，但消息被放置在警报框的左侧。是否有一种方法可以使此消息在警报框内居中显示？

- Benjamin Felix

---

在你的消息前后添加空格（或制表符）。 - glautrou

创建自己的定制消息框或使用类似于jQueryUI的库。 - Logan Murphy

我不认为那会符合我的目的。每个警告框针对不同消息需要不同数量的空格。说实话，这不是一个解决方案！ - Benjamin Felix

似乎无法格式化文本框。您可以尝试使用对话框窗口，然后可以按照您想要的任何方式进行格式化。 - Gene Parmesan

@LoganMurphy，你能告诉我更多关于如何创建自定义消息框的内容吗？ - Benjamin Felix

Answer 1

首先，您需要知道的一件事是无法对警告框进行样式设置。因为它是系统对象而不是CSS元素。

---

如果您仍然想使用警告框并希望将文本从左到右移动，请使用\t，即制表符。您可以计算出每行要使用多少个字符，然后将文本包含在\t中。

例如：

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

虽然不完美，但这是最接近将文本移动到alertBox中心的方法。

\t在Firefox中表现完美，但在Chrome中却不行。我喜欢Chrome，但作为一名Web开发人员，这真是令人头痛的问题。

---

顺便说一下：您也可以创建自己的alertBox。例如，

jQuery UI Dialog

请看这里：DEMO

我最近用来显示消息的最好的东西是使用toast消息。它们弹出，以漂亮的框显示您的消息，然后以流畅的方式弹出。

看看MATERIALIZE CSS TOASTS

- xxbinxx

Answer 2

如果您的警报消息是静态的，则在消息开头添加多个 '\t'。

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

这里的“\n”用于换行消息并将其放置在下一行

- Kunal Waghmare

Answer 3

你应该能够编辑JavaScript的CSS文件，并使用Text-align将内容居中。

#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; 
}

- JonnyChin

---

这个应该可以工作吗？在我的Ubuntu Firefox上没有工作。#popup_container是默认名称吗？我如何“编辑Javascript的CSS文件”？难道它不是我的网站相同的CSS吗？ - Rodrigo

alert对话框不属于DOM，无法用CSS进行定位。 - Quentin