How to center a message inside a warning window in JavaScript?

Question

Suppose I have a warning:

alert("Message"); 

When this command is executed, a warning pop-up window appears, but the message is aligned to the left edge of the warning window.

Is there a way to center this message inside the warning window?

Answer 1

If your warning message is static, add a few "\ t" at the top of your message.

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

Here \ n is used to break the message and place it on the next line

Answer 2

Well, one thing you need to know is that you cannot draw up an alert window. this system object is not a CSS thing .

---

if you still want to use the alert and want to move the text from left to right, use \t , which is the tab. You can find out how many characters you are going to use in a string, and then wrap the text in \t s.

eg:

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

This is not ideal, but it is so close to moving the text to the center in the alertBox.

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

---

For your information: you can also create your own. For instance,

JQuery UI Dialog

Look here: DEMO

The best I've used these days to display messages is to use toasts. They pop up, show your message in a beautiful box, and then pop up in a smooth manner.

take a look at CSS TOAST MATERIALIZATION

Answer 3

You should be able to edit the Javascript CSS file and centralize the content using Text-light.

 #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

Here is a very simple solution using custom code. Just click on the message box to close it. The warning is no longer blocked, it is focused on the callback. The message box is also always in the center of the window.

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