JavaScript Popups (JavaScript Tutorial part 22)

১১/২১/২০১১ ১২:৪০:০০ AM | , | 0 comments »

Chances are, if you are reading this webpage, then you have experienced hundreds of JavaScript popup windows throughout your web surfing lifetime. Want to dish out some pain of your own creation onto unsuspecting visitors? I hope not! Because websites with irrelevant popups are bad!

However, we will show you how to make windows popup for reasonable occasions, like when you want to display extra information, or when you want to have something open a new window that isn't an HTML anchor tag (i.e. a hyperlink).

JavaScript window.open Function

The window.open() function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes the window.open() function.

HTML & JavaScript Code:

<head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>

Display:

CLICK ME TOO!
This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window that pops up.

JavaScript Window.Open Arguments

There are three arguments that the window.open function takes:
  1. The relative or absolute URL of the webpage to be opened.
  2. The text name for the window.
  3. A long string that contains all the different properties of the window.
Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:
  • dependent - Subwindow closes if the parent window (the window that opened it) closes
  • fullscreen - Display browser in fullscreen mode
  • height - The height of the new window, in pixels
  • width - The width of the new window, in pixels
  • left - Pixel offset from the left side of the screen
  • top - Pixel offset from the top of the screen
  • resizable - Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox.
  • status - Display or don't display the status bar
Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.

Upgraded JavaScript Popup Window!

Now that we have the tools, let's make a sophisticated JavaScript popup window that we can be proud of!

HTML & JavaScript Code:

<head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.com/", "myWindow", 
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body>

Display:

CLICK ME TOO!
Now, that is a prime example of a worthless popup! When you make your own, try to have them relate to your content, like a small popup with no navigation that just gives the definition or explanation of a word, sentence, or picture!

এতে সদস্যতা: মন্তব্যগুলি পোস্ট করুন (Atom)