Alert Box Popup
You can use this one if you want to make sure that information you give comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Example:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function Message()
{
alert('Your message to show');
}
</script>
</head>
<body>
<input type="button" onclick="Message()" value="Show alert box"/>
</body>
</html>
Confirm Box Popup
The same with the Alert Box Popup, confirm box popup is commonly used to make sure that the information given comes through to the user, maybe exactly to verify or accept something. Just like its name, when a Confirm Box pops up the user will have to click either "OK" or "Cancel" to confirm if its user wants to proceed or otherwise not. If the user clicks "OK" the box returns true, and if the user clicks "Cancel" the box returns false. Example:
<!DOCTYPE html>
<html>
<body>
<script type='text/javascript'>
function Message()
{
var x; var r=confirm('Do you want to proceed?');
if (r==true)
{
x='You confirmed to proceed';
}
else
{
x='You confirmed not to proceed';
}
document.getElementById('demo').innerHTML=x;
}
</script>
<button onclick='Message()'>Proceed</button>
</body>
</html>
Prompt Box Popup
You can use this alert if you want the user to input a value before entering your website. When a prompt box pops up the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Example:
<!DOCTYPE html>
<html>
<body>
<button onclick="Message()">Proceed</button>
<script type="text/javascript">
function myFunction()
{
var x;
var name=prompt("Please enter your name","John Smith");
if (name!=null)
{
x="
Hello " + name + "! How are you today?
";document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>
If you want to put a line break inside a popup box, you can use a back-slash followed by the character n. Example:
alert("Hello...\nHow are you today?");
It will result in a text like the below.
Hello...
How are you today?
There is also a version that will keep the cookie, which means that the next time a user that's been to your website and specified or gave his/her browser a name as asked by the script, he/she will be greeted with an alert as you specified in the popup box's code. It's just something like when you open a website and then you're greeted with a message that says "Hello John Smith.. Welcome back here!". Sure you've ever found it, right? Here is the code. The code above looks like the below.
|
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } } } function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; } function checkCookie() { var username=getCookie("username"); if (username!=null && username!="") { alert("Welcome back " + username); } else { username=prompt("Please enter a name to identify your browser.",""); if (username!=null && username!="") { setCookie("username",username,365); } } } </script> </head> <body onload="checkCookie()"> </body> </html> |
0 comments:
Post a Comment