Open Animated Popup Windows Using JavaScript

Introduction

In this article we will see how to open a popup window which 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 in 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 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 user.

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 which 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 web site attractive. I hope you really enjoyed this article.