Description:

In this article, I will explain how to open popup window using Jquery.

Popup control is a floating window that showing dialog box which contains title bar and the content area for the popup page.

Popup dialog window can be resized, moved and closed.

We can manually set height, width and title for the popup window.

Syntax:

window.open(Url,name,features,replace)

Url- (optional)  - It redirects to the URL of the page to open

Name- (optional)  - Target Name of the window

Features-(optional) - It has list of items,

fullscreen - Yes (1), No(0)
location - Yes (1), No(0)
menubar - Yes (1), No(0)
scrollbars - Yes (1), No(0)
toolbar - Yes (1), No(0)
status - Yes (1), No(0)
resizable - Yes (1), No(0)
top - (value)
left - (value)
height - (value)
width - (value)

Replace - (optional) - It specifies whether the url creates a new entry or replaces the current entry in the window's history list (Boolean)

We can do exactly the same with window.ShowModalDialog function, but window.ShowModalDialog does not allow to access parent page untill you close the popup window.

Example program:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnPopup").click(function () {
                var Openwindow = window.open("http://www.jqueryjohn.com", 'Jqueryjohn', 'menubar=0,toolbar=0,scrollbars=1,resizable=0,statusbar=0,minimizable=0,width=400,height=300,top=100,left=100');
                if (!Openwindow) {
                    alert("A popup blocked in your browser");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnPopup" runat="server" Text="Open Popup" />
    </div>
    </form>
</body>
</html>


How to open popup window using Jquery, Using Jquery to open a Popup window, Popup window using Jquery, Open Jquery Popup window, How to open a link in a new window using Jquery,Open link in a new window using Jquery, Syntax to open Popup window.

0 comments:

Post a Comment

 
Top