JavaScript - Small Tips II (How To Make An Alert Message Pop Up Box)

Before we go any further to discuss this JavaScript - Small Tips II, I must remain you as in JavaScript I, that at least there are 2 think we must be consider to use the JavaScript apps , because to many JavaScript in your template will slowing down your web page to load. Besides that, for security reason, many user set their browser to disable JavaScripts. To resolve these problem, we must be wise to choose which the JavaScript that will be install into our template (choose the appropriate and useful JS apps) and use the "warning message" that we using JavaScript .

How To Make An Alert Message With JavaScript.

The functions of an alert message is to provide announcements, information or warning to the guests before they go to see or read the entire contents of our site.
There are a few display an alert message that we can create, an alert message box which only has a button 'OK', "OK" button and "cancel" to divert to other sites, and an alert message box with a dialog box.

Note: This tricks maybe annoying to some people, because this pop up box will STOP our browsing activity, we will not be able to do anything until we execute this pop up box (click OK or X).

An Alert Message Box With 'OK" Button.

We usually seen this message on "adult" or "serious" sites, the messages give warning to their visitor about the content of the sites and their restriction or limitation.
To create an alert message box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. And paste this code shown below.

<script type="text/javascript">
alert('You are about to enter our "serious" site. This site contains violence and sadistic material, persons under 18 years old are prohibited ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>

Just change the Red words with your message..!, this words will be displayed as a pop up alert box when the visitors view your site / blog. The Purple words will show up when our guests disable their Javascript on their browser.
Look at this example below..

I put this "alert message" page element right under my header. This alert message box just for an information cause both choices, click "OK" button or click "X" will bring our visitor directly into our site (continuing to open our site).


An Alert Message Box With Confirmation ( "OK" and "Cancel" ) Button. 

For any reasons, sometimes we need to give our guests a choice not to continuing or cancel to visiting our website / blog. If our guests prefer to cancel, then they will be redirect into another URL address.
So if we want to do this trick, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area or even below your header, and select HTML/JavaScript and Paste this code below.

<script type="text/javascript">
confirm('This site contains sadistic materials. Are you sure you want to continue?');
if (confirm('This site contains sadistic materials. Are you sure you want to continue?')) {
window.location = "http://doit2us.blogspot.com/";
}
else {
window.location = "http://www.google.com/";
}
</script>

Change the Red words with your message..!, the Blue URL is the URL destination address when our guests click the "OK" button, and the Purple URL is the URL destination address when our guests click the "cancel" button or click "X".
 

An Alert Message Box With Dialog Form

Besides give a warning or information to our guest, with this simple Javascript trick below, we can build a warning or information message + dialog form. In this example below, This trick is to give a warning to our guest, knowing the name, and give a welcome message. It,s a rather weird isn't it, but this just a sample, you can created better than this, I just want to share an Idea...

First Script

<script type="text/javascript">
alert('You are about to enter our "serious" site. This site contains violence and sadistic material, persons under 18 years old are prohibited ... Beware!')

var yourName = prompt("Please, write your name first...!", "Reader");
</script>

<noscript>Enable javascript in your browser to view an important message.</noscript>
<script type="text/javascript"></script>

The way what we done it, is the same with both  How To Make An Alert Message With JavaScript. above, I put the FirstScript page element below my header. Because this is a dialog box, of course we must have a follow up, to continuing the action, So I put a second script  in top of my post body as my welcome message.

Second Script

Thank you <script type="text/javascript">document.write(yourName)</script>! Feel free to look around. If you like what you read, please mention us in your post or link to this site. Enjoy your visit <script type="text/javascript">document.write(yourName)</script>

So this is what we got with those trick.
When first opened our site or blog, there will be a pop up box warning message just like the first trick,

after click "OK" or "X" button, there will be shown another pop up dialog box like this,

If the Guest write their name into the dialog box (eg. Mc4tur) and click "OK", then they will be brought to continuing opened our site with a welcome message in the place where we put the second script page element.

Well that's all, you can combined those tricks or make a modification (eg. put into the post). but please remember choose wisely because of the disadvantage of the JS tricks.