If you have same dream like what i am talking about than read this post carefully, This post will help you to make such a creative website who can attract more visiters.
These JavaScript Dialogue Boxes will help you to make a very simple and creative website, That is user friendly, simple & creative.
There are three type of Dialogue Boxes in JavaScript who will help you to make a creative website, These JavaScript Dialogue Boxes are Confirm Box, Alert Box & the last one is Prompt Box.
Confirm Box :
The Confirm Box is used to verify or to accept something that you want to accept by the user, Like accept Terms and Conditions, any kind of checkmark, and to verify something to, Like would you like to continue etc.
When Confirm Box pop up's It has only two button the first one is Ok, and the second or last one is Cancel button, If you click on Ok it means you proceed to next activity and the window method confirm() will return true, and if the User click on Cancel button that means used does not want to proceed next activity and the window method confirm() will return false & show null, So Let's Understand this Confirm Dialogue Box by an Example.
Confirm Box Example :
<!DOCTYPE html>
<html>
<head>
<title>Confirm Dialogue Box</title>
<script type="text/javascript">
function ConfirmBox(){
var Val = confirm("Do you want to continue ? / Press Ok to continue");
if( Val == true){
document.write("You Press 'Ok'");
}
else{
document.write("You Press 'Cancel'");
return false;
}
}
</script>
</head>
<body>
<p>Click On Confirm Dialogue Box...</p>
<form>
<input type="button" value="Confirm Dialogue Box" onclick="ConfirmBox();" />
</form>
</body>
</html>
<html>
<head>
<title>Confirm Dialogue Box</title>
<script type="text/javascript">
function ConfirmBox(){
var Val = confirm("Do you want to continue ? / Press Ok to continue");
if( Val == true){
document.write("You Press 'Ok'");
}
else{
document.write("You Press 'Cancel'");
return false;
}
}
</script>
</head>
<body>
<p>Click On Confirm Dialogue Box...</p>
<form>
<input type="button" value="Confirm Dialogue Box" onclick="ConfirmBox();" />
</form>
</body>
</html>
Alert Box :
In JavaScript the another type of Dialogue Box is Alert Box, This Alert Box is used to show Warning Message to the users, Like Password Confirmation, any special input values etc, for if user enter the wrong value other than a required value that is input mismatch.
These Alert Boxes are mostly used in input form like Registration form, in Registration form the form require different type of input value but the user enter different type of value, Than we use Alert Box to show Warning Message to the user, So now let's understand this Alert Box by using an Example.
Alert Box Example :
<!DOCTYPE html>
<html>
<head>
<title>Alert Box</title>
<script type="text/javascript">
function AlertBox(){
alert("You did not fill all the require * fields...")
document.write("Please fill the all require * fields...");
}
</script>
</head>
<body>
<p>Click Here On Alert Box Button...</p>
<form>
<input type="button" value="Alert Box" onclick="AlertBox();" />
</form>
</body>
</html>
<html>
<head>
<title>Alert Box</title>
<script type="text/javascript">
function AlertBox(){
alert("You did not fill all the require * fields...")
document.write("Please fill the all require * fields...");
}
</script>
</head>
<body>
<p>Click Here On Alert Box Button...</p>
<form>
<input type="button" value="Alert Box" onclick="AlertBox();" />
</form>
</body>
</html>
Prompt Box :
The Prompt Dialogue Box is used when you require some input value on page loading time, Like if you want to show any greeting message to the users.
The Prompt Box have also two buttons that is 'Ok' and 'Cancel' button, When we show the greeting message to the user and than user enter some value and than click 'Ok' button than the javascript function will show the the users entered value, If the user click on the 'Cancel' button the JavaScript function will return null this will show you a null value, So now It's time to implement Prompt Box Example Lets see a example of Prompt Box.
Prompt Box Example :
<!DOCTYPE html>
<html>
<head>
<title>Prompt Box</title>
<script type="text/javascript">
function PromptBox(){
var Name = prompt("Enter Your Name :");
document.write("Hello "+Name);
}
</script>
</head>
<body>
<p>Click Here On Prompt Box Button...</p>
<form>
<input type="button" value="Prompt Box" onclick="PromptBox();" />
</form>
</body>
</html>
<html>
<head>
<title>Prompt Box</title>
<script type="text/javascript">
function PromptBox(){
var Name = prompt("Enter Your Name :");
document.write("Hello "+Name);
}
</script>
</head>
<body>
<p>Click Here On Prompt Box Button...</p>
<form>
<input type="button" value="Prompt Box" onclick="PromptBox();" />
</form>
</body>
</html>
If You have any question related to this post please contact us or leave a comment in a Comment Box we will try to reply you soon...
Very simple and easy concept, thanks
ReplyDelete