Javascript- Close() Function


Javascript



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

Javascript-jquery book

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.

amazon close 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:

Close window button

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.

HTML Comment Box is loading comments...