Learn How to Implement Pop-up Windows in JavaScript

Learn How to Implement Pop-up Windows in JavaScript

In our last post we learned about DOM Nodes and its properties in JavaScript, today we will continue our JavaScript session and will learn to implement Pop-up Windows in JavaScript. Pop-up windows opens the selected data or URL in a new browser window. So let look into is coding part.

First We have to create a function in JavaScript to use the method called open(); as shown below

Then we have to make a button with an event in html. I’m going to use onclick event as shown below

In this case, Popup windows seems like as any other browser window. So to make it in a pop up way, we have to add some features shown below.

In the above coding, I just gave method name “pop_up_win”.

We also have to add some restriction about the size of pop up. This thing makes the true pop_up window.

The code can open the pop up window in the specified size given in coding.

If you want to make your popup window resizable then add some more string keywords as shown below.

Applying some JavaScript functions

For adding some JavaScript functions, we have to create a variable and assign window.open(); function to that variable.

If you don’t want to add a webpage in pop-up window but you want to add some text or link then just leave the first double quotes blank. See the code below.

We can change the default place of the popup window by using this function

To close the popup window, just add a button in html for running a function.

And create a function in JavaScript named close_pop_up_func

Hence we have completed our session to implement pop-up windows in JavaScript. Feel free to let us know your views regarding this tutorial by commenting below.


Please enter your comment!
Please enter your name here