Learn How to Implement Pop-up Windows in JavaScript

0
3115
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

function pop_up_func() 
{
window.open("https://www.google.com");
}

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

<button onclick="pop_up_func()">Click to open a new browser window</button>

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.

function pop_up_func() 
{
window.open("https://www.google.com", “pop_up_win”);
}

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.

function pop_up_func() 
{
window.open("https://www.google.com", “pop_up_win”, “width=350”, “height=250”);
}

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.

function pop_up_func() 
{
window.open("https://www.google.com", “pop_up_win”, “width=350”, “height=250”, “resizable=1”);
}

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.

function pop_up_func()
{
var new_win = window.open("", “pop_up_win”, “width=350”, “height=250”);
new_win.document.write(‘This is the new text’);
}

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

function pop_up_func()
{
var new_win = window.open("", “pop_up_win”, “width=350”, “height=250”);
new_win.moveTo(4,7);
}

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

<button onclick="close_pop_up_func()">Close popup browser window</button>

And create a function in JavaScript named close_pop_up_func

function close_pop_up_func()
{
new_win.close();
}

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here