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.