Open POP UP and new window using jQuery

 

Sometimes we have requirement to open pop up and window at once by using java script or jQuery. By using jQuery we can open popup and window easily and we can set the focus on popup.

 

For example we have a web page  as shown below.

 

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>                                   

 

<script type="text/javascript" src="openWindow.js"></script>

 

</head>

 

<body>

 

    <div id="div1">

 

        <a href="http://www.google.com">

            Click here

        </a>

        to Open two Windows

 

    </div>

 

</body>

 

</html>

 

Whenever user clicks on an element we have to open pop up and new window. We can do this by using jQuery as shown below.

 

$(document).ready(function () {  

 

    $("#div1 a").click(openWindow);

 

});

 

function openWindow(e) {  

    e.preventDefault();

    var link = $(this);

    var url = link.attr('href');

 

       if ($.browser.msie) {

           window.location = url;

          } else {

            window.open(url);

        }

 

     window.open('http://www.yahoo.com', 'myPOPUP', 'top=50,left=500,width=400px,height=500px,location=no,menubar=no,toolbar=no,scrollbars=yes');

}

 

As shown above, we are assigning function openWindow for the click event for anchor element in jQuery ready function. In openWindow() function we are getting a element href value and opening in the same window if the browser is internet explorer and opening in new window if it is other browser. And by using window.open() we are opening the pop up by providing the width and height.


                                                                                                       jqueryOpenWindow.zip (32.38 kb)