Wednesday, 19 March 2014

How to open popup window in ASP.NET with JavaScript


In this article I will explain how to open a popup window in ASP.NET using JavaScript.

Sample JavaScript code:

Below is the sample code for showing popup window. Login.aspx is an Popup window page. Target is set to blank(_blank) and we set directions for the popup window. 

 function LoginPop() {
var n;
 n = window.open('Login.aspx', '_blank', 'channelmode=no,directories=no,left=0,location=no,menubar=no,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=no,top=0', true);n.focus(); CloseWindow();
        }

The open () method opens a new browser window. Open method supports all major browsers.

Syntax:

window.open(URL,name,specs,replace)


Properties:

1.      URL: Optional. Specifies the URL of the page to open. If no URL is specified, a new window with          about:blank is opened
2.      Name: Optional. Specifies the target attribute or the name of the window. The following values are supported:
·         _blank - URL is loaded into a new window. This is default
·         _parent - URL is loaded into the parent frame
·         _self - URL replaces the current page
·         _top - URL replaces any framesets that may be loaded
·         name - The name of the window (Note: the name does not specify the title of the new window)
3.      Specs: Optional. A comma-separated list of items. The following values are supported
4.      Replace: Optional. Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported:
·         true - URL replaces the current document in the history list
·         false - URL creates a new entry in the history list

Below is the Sample code for JavaScript Popup window code.

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Title</title>
<script language="javascript" type="text/javascript">
function LoginPop() {
var n;
n = window.open('Login.aspx', '_blank', 'channelmode=no,directories=no,left=0,location=no,menubar=no,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=no,top=0', true);
n.focus();
CloseWindow();
}
function CloseWindow() {
window.open('', '_self', '');
window.close();
}
function SetFocus() {
var ctl = document.getElementById("txtnone");
ctl.focus();
}
</script>
</head>
<body onload="SetFocus()">
<form id="form1" runat="server">
<input type="text" id="txtnone" onfocus="LoginPop()" tabindex="1"/>
</form>
</body>
</html>

No comments:

Post a Comment