11

Suppose I have an alert message like: 

 alert("Message");

When this command is executed, an alert box pops up but the message is aligned to the left of the alert box.

Is there a way to center this message inside the alert box?

anvita surapaneni
  • 359
  • 2
  • 12
Benjamin Felix
  • 165
  • 1
  • 2
  • 7
  • 1
    Add spaces (or tabs) before and after your message. – glautrou Aug 07 '13 at 18:48
  • 3
    Create your own custom message box or use a library like jQueryUI – Logan Murphy Aug 07 '13 at 18:48
  • 1
    I don't think that would serve my purpose. Each alert box for different messages would need a varied number of spaces. That's not a solution to be honest! – Benjamin Felix Aug 07 '13 at 18:49
  • It doesnt seem you can format text boxes. You could try using a dialog window which then you can format anyway you want – Gene Parmesan Aug 07 '13 at 18:50
  • @LoganMurphy can you tell me more about creating custom message boxes? – Benjamin Felix Aug 07 '13 at 18:50
  • @GeneParmesan thanks for the answer. Will look it up. Let's see if I can find something on it! – Benjamin Felix Aug 07 '13 at 18:51
  • http://jqueryui.com/dialog/ should have all the information you need – Gene Parmesan Aug 07 '13 at 18:57
  • Follow this link: http://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box for more info why you cant influence alert message box and how can you create your own info box or use already finished and styled inof boxes. – Zivko Aug 10 '16 at 13:08
  • @BenjaminFelix FYI you can accept an answer which best solves your problem. If it didn't solved we would love to hear how you solved your problem. Please help us learn too. – xxbinxx May 13 '19 at 06:08

3 Answers3

2

Well, one thing you should know is you can't style the alert box. it's the system object not a css thing.

if you still want to use alert and want to move your text from left to right use \t, which is a tab. You can figure out how many characters you're going to use on a line and then encase the text in \ts.

eg:

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

It's not perfect, but it's as close to what one can move text to center in alertBox.

\t works perfect with Firefox but not with Chrome. I love Chrome, but as a web developer this is a pain in the neck.

FYI: You can also create your own. For example,

jQuery UI Dialog

Have a look here : DEMO

The best thing I used these days to display message is using toast messages. They pops up, show your message in beautiful box and then pops out in sleek manner.

have a look at MATERIALIZE CSS TOASTS

xxbinxx
  • 1,527
  • 11
  • 18
1

If your alert message will be static then add multiple '\t' at the starting of your message.

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

Here \n is use for break the message and place on next line

Kunal Waghmare
  • 183
  • 3
  • 10
-4

You should be able to edit the CSS file of the Javascript and centralize the content using 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; 
}
Evaldas Buinauskas
  • 13,739
  • 11
  • 55
  • 107
JonnyChin
  • 1
  • This should work? It's not working on my Ubuntu's Firefox. #popup_container is a default name? How do I "edit the CSS file of the Javascript"? Isn't it the same css of my site? – Rodrigo Mar 21 '16 at 19:44
  • 5
    `alert` dialogs are not part of the DOM and cannot be targeted with CSS. – Quentin Aug 10 '16 at 12:59