Javascript- Close() Function
The Close() function is a function which closes an open window.
Using this function, we can tie to it a button's onclick event handler, so that when the button is clicked, the window will close.
As an example to how the javascript close() function works, look at the below example.
Click the "Open New Window" button to open a new window. A new window will open up.
Inside of this window is a "Close Window" button. Click this button and the window will close.
HTML Code
To create this "Open New Window" button which you see above, the HTML code to do so is:
This button has an onclick event handler which calls the openwindow function when this button is clicked. The code for this function is shown right below in Javascript code.
Javascript Code
The Javascript code to open up a new window with a "Close Window" button is:
In Javascript, we create a variable named newwindow. We assign it to the window.open() function which opens a blank new window of 300 pixels of width and height.
The next line takes this window object and produces the button, which has an onclick event handler appended to it. This onclick event handler has the window.close() function, so that it
closes the window when pressed.
Another More Practical, Real-life Example
Another example that is more real-life like is shown below.
Below is a small image of a book. When the image is clicked, a new windos is opened of an enlarged version of the image.
Click image to enlarge it
If you've clicked the image, you can see that it opens a new window, showing a more enlarged size of the image.
This is exactly what many websites do for products which they sell. If the image of the product is clicked on, a much larger view of the product can be seen in a new window.
This is exactly what Amazon.com does for products which they sell.
HTML Code
The HTML code to create the image above which opens a new enlarged version of the image in a new window is:
This <img> tag has an onclick event handler appended to it. Therefore, when it is clicked,
it calls the enlargeimage() function. This function creates a new window
that has the enlarged version of the image.
Javascript Code
The Javascript code of of the enlargeimage() function is:
The first line creates a variable called newwindow which stores the value of an open window function of width and height of 500px. The second line creates an image button
in this window, "Close Window". The third line places the enlarged image of the Javascript & Jquery book in the window.
How to Implement an Image Button with the Close() Function
In this example, we will show how you can implement a "Close Window" button with an image, as amazon does, so that
you can have a custom made "Close Window" button.
You can see in the above image amazon's "Close window" button on the top right-hand corner.
Amazon uses this image below to close windows of its enlarged products page:
We can implement this same button by representing it as an image and adding an onclick event handler to the <img> tag.
Click the button below to see this on the new window page:
HTML Code
The HTML code to produce the above button is:
The button above calls the amazonbutton() function when clicked on. This function displays an image
button as the "Close window" button instead of the default HTML button.
Javascript Code
The javascript code for the amazonbutton() button is:
Here we added the image of the button and appended a onclick event handler to that closes the window when the button
is clicked.