Site icon Nabtron

Javascript auto popup window code

This javascript auto popup window script will make a small popup window automatically open to your users when a page is loaded.

This is great for showing some important messages to the users.

Javascript auto popup window code

Add this code to the head of your current page to open the popup using javascript.

<SCRIPT LANGUAGE="JavaScript">
function popupWin() {
text = "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 3000); // delay 3 seconds before opening
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=100');
newWindow.document.write(text);
}
</script>

It’s not complete yet, change <body> tag to:

Let me know if you have any queries or issues.

<body onLoad="popupWin()">

What this line of code does is that it adds a onLoad event to the body tag. So when the body finishes loading, it triggers a function that we have defined in the double quotes: “popupWin()”. A name followed by these brackets () refers to a function. Here it’s referring to the javascript function that we defined in the code above.

Javascript auto popup window code explanation

The javascript code is enclosed in opening and closing tags:

<SCRIPT LANGUAGE="JavaScript">
// our code is here, between the opening and closing tags
</script>

In the code, we created the function. the function is created by writing “function” followed by its name connected with round brackets. The round brackets are followed by the curly brackets that contain the main code of the function.

function popupWin() {
}

Here this is the function named popupWin. The round brackets “()” are there to take any variable value. We’re not providing the function with any value right now so that’s why the brackets are empty.

The curly brackets contain the main code. Like for this function:

function popupWin() {
text = "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 3000); // delay 3 seconds before opening
}

Here we’re simply adding content to a variable that we called “text”.

In each line, more text is added to the “text” variable.

+= means that the previous value of the variable isn’t destroyed, rather the new value is appended (added after the previous one). Note that we’re adding html code to the text variable.

In the last line, we’re adding delay to the code to execute, so that our popup loads after a small delay. The time is in microseconds, thus 3000 refers to 3 seconds.

Notice that we created 2 functions in the main code. The first function is calling it in the last line, by: windowProp(text) part of code.Notice how we’re forwarding the text variable to the new function.

The other function was:

function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=100');
newWindow.document.write(text);
}

This function will take the variable text and use its value. In the first line inside the function, it opens the window, calls it newWin and gives it a width and height.

On the next line, it writes the content of the text variable to this new window!

What is a variable?

By the way, some people get confused by what variable is. Variable is any word that we use in a scripting or programming language which doesn’t mean anything itself, however it hold some value that either language defines itself or we provide it. The variable value shouldn’t be enclosed in quotes (single quote: ‘ ‘ or double quote: ” ” ) as it loses its value and becomes a string or any other form of data, mostly. I said mostly because there are still cases where it doesn’t convert to a string and remains a variable.

Let me know if you have any queries or issues.

Exit mobile version