Open Animated Popup Windows Using JavaScript

Introduction

In this article, we will see how to open a popup window that has some animation. In my Popup Windows in ASP.NET MVC you saw the modal and modeless popup windows for MVC application and in that article, these windows were very simple windows. In this article, we will not open the popup windows directly but we will open them by incrementing the height and width of the window and then finally show the full-length window.

In such a situation where we are showing only titles on one page and then we need to show the whole summary of the title surely so, many developers use the popup windows to display the description. Consider the case when we have only a products list on our page with only product titles as a hyperlink and when the user clicks on any hyperlink we need to fetch the data from the database and display the data in another window. As usual, we will use a popup but it's very effective because the popup is opened immediately but in this article, we will see how to show this popup animated. Using this animated concept we can attract our users.

Step 1:

Create a new website add the page to the application.

Step 2:

Paste the following scripts to open our popup windows.

<script>
var winheight = 100
var winsize = 100
var x = 5
function openwindow(thelocation) {
temploc = thelocation
if (!(window.resizeTo && document.all) && !(window.resizeTo && document.getElementById)) {
window.open(thelocation)
return
}
win2 = window.open("", "", "scrollbars")
win2.moveTo(0, 0)
win2.resizeTo(100, 100)
go2()
}
function go2() {
if (winheight >= screen.availHeight - 3)
x = 0
win2.resizeBy(5, x)
winheight += 5
winsize += 5
if (winsize >= screen.width - 5) {
win2.location = temploc
winheight = 100
winsize = 100
x = 5
return
}
setTimeout("go2()", 50)
}
</script>
<script language="JavaScript">
function expandingWindow(website) {
var windowprops = 'width=100,height=100,scrollbars=yes,status=yes,resizable=yes'
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7; // horizontal scrolling speed (higher = slower)
var leftdist = 10; // distance to left edge of window
var topdist = 10; // distance to top edge of window
if (window.resizeTo && navigator.userAgent.indexOf("Opera") == -1) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("", "", "left=" + leftdist + ",top=" + topdist + "," + windowprops);
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)
sizer.resizeTo("1", sizeheight);
for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed)
sizer.resizeTo(sizewidth, sizeheight);
sizer.location = website;
} else
window.open(website, 'mywindow');
}
</script>

In the above sample we have two scripts to open animated popup windows having two functions that use the same code which you are using to open the popup window like window.open and all the things.

Step 3:

Now put two hyperlinks on your page to call the function of the above script onclick of the hyperlink like below.

<a href="javascript:openwindow('http://www.c-sharpcorner.com')">C-Sharpcorner</a>
<br />
<a href="#" onClick="expandingWindow('http://www.c-sharpcorner.com');return false">C-Sharpcorner</a>

You can pass a different URL as per your requirement to these functions. As we discussed above, need to show the details of the product here; you can pass the URL of your own page and onload event of the page you can fetch the data and display on the page.

Step 4:

Run your application and click on the hyperlink and see the animated popup window.

Conclusion

Using simple JavaScript we can make our website attractive. I hope you really enjoyed this article.

4 Comments

Join the conversation! Your thoughts help the community grow.

Saineshwar Bageri12y ago
must have snap shot of it
Maria Johnson14y ago
Its a very useful article for those who wants to learn about opening a popup window which has some animation.
- Krishna Garad14y ago
  thank's
Maria Johnson14y agoedited
Its a good article too.