add css to JavaScript Popup box

Question

i have made a js popup box to verify customers age before enter to a category.

i made a age-verification.js file with this code included, in my templat js/ folder:

var agePrompt=prompt("What is your age?");
if (agePrompt>=18) alert('Welcome!')
else {
alert('Sorry! Come back in a few years!')
document.location=" ";//link if not 18
}

and i added this XML code:

<reference name="head">
 <action method="addItem">
 <type>skin_js</type>
 <name>js/age-verification.js</name>
 </action> 
</reference>

to

Admin -> Catalog -> Manage Categories -> {Selected category} -> Custo Design -> Custom Layout Update

now i want to add some css styles to my js popup window.

how to do that? (with details please)

• dh47: You cannot. alert() simply shows a native message box, so it'll look however the OS makes it look. see here
• Moh3n: @dh47 i know i should do it with html. but i don't know how. i will thankful if some one explain it for me.

Answer 1

you can add with below code for css in skin folder

<reference name="head">
 <action method="addItem">
 <type>skin_css</type>
 <name>css/styles.css</name>
 </action> 
</reference>

and if want to create custom popup you can use

https://stackoverflow.com/questions/16653238/custom-popup-boxes-in-html-javascript-and-css

• dh47: are you sure ?? so you mean to say we can apply styles to alert messages?? @liyakat
• liyakat: @dh47 as i understood from question, he has made a js popup box as custom.
• dh47: that mean you didn't understood the question he just added alert('Sorry! Come back in a few years!') alert messages and css cannot be added to alert messages moreover your answer is not at all related to his question.
• liyakat: but if he will make popup with custom html and instead of alert() he can use custom alert. at that time above code will utilize.
• liyakat: @dh47, i am agree with you that we can not change color for popup which used function like prompt