Menu
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?
659
The standard alert box in JavaScript does not provide the option to apply CSS. To style your alert box, you need to create a custom one first. The custom alert box will be created using jQuery and styles will be applied to CSS.
Add class . text-center to the parent div to align text or any item inside to the center. You can also decide how the alignment should look like on the specific screen sizes.
To customize the position of an alert box, use the CSS “top” and “left” properties. We have a custom alert box, which we've created using jQuery and styled with CSS.
Alert Method in JavaScript alert(“hello”) To use Alert Method in JavaScript, we have to write alert() inside the JavaScript Script Tags. (If we are using JavaScript inside an HTML Web-Page). After writing Alert method, [ alert() ] we have to write our Data/Text/Warning, that we want to Display inside our Alert Box.
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
101
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
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
