Introduction
This article is to demonstrate how to use a GreyBox Javascript popup window in
asp.net application. Though, popup windows can be used using jquery, AJAX model popup or other framework. I have used greybox javascript popup window due to its ease of use and light weight.
About GreyBox
GreyBox is open source javascript library that can be included in your project. This library can perform operations like AJAX calls, Popup window, Animations and many more. The popup window can be easily customize as per requirements using CSS.
The library is opensource and is available for download at
http://orangoo.com/labs/GreyBox/. This link also contains documentation for the GreyBox. In sample application GreyBox V5.54 is used. You can refer above link for the latest version of the GreyBox.
Using GreyBox opens a popup window in
iframe and is not blocked by popup blocker. When the pop is opened, the content of the current page will be disabled.
GreyBox popup is supported in following browsers :
- Internet Explorer
- Firefox
- Safari
- Opera
- Chrome
Note : "GreyBox is copyrighted work by Amir Salihefendic. It is based on AJS JavaScript library. It is realesed under LGPL."
Using the code
Download the attached sample code for better understanding. The Sample code includes .net website; Set the Example.aspx as your startup page of the website and run the solution. Following steps describe the installation and use of GreyBox.
Step 1 : Download and include GreyBox files
Download the GreyBox library from
http://orangoo.com/labs/GreyBox/ and inlcude greybox folder content in your
website at root level.
Greybox folder will contain following files as show in the image below.
Step 2 : Configure master page or aspx page to use GreyBox
Specify path of the root directory of greybox folder in GB_ROOT_DIR.
<script type="text/javascript">
var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script> Append also following scripts along with the stylesheet.
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
Use
Page.ResolveClientUrl function to get the relative path of the greybox folder.
Include .js file in the master page or in aspx page using <script> tag. Add
script tag in head section or in body section of the aspx page. It is preferred to add in body section
because .net function can be used inline to get the relative path of the JavaScript file.
In this sample, script is added in the master page so that all the pages using this
master page can use GreyBox. If you want to use GreyBox in a specific page, then add the script tag in that aspx page only. You also need to add reference of stylesheet using link tag as shown in below sample code.
MasterPage.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPages_MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" id="idHeader">
<title>GreyBox Demo</title>
<link href="../greybox/gb_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
var GB_ROOT_DIR = '<%= this.ResolveClientUrl("~/greybox/")%>';
</script>
<%--Include grybox javascript files--%>
<script type="text/javascript" src='<%= this.ResolveClientUrl("~/greybox/AJS.js") %>'></script>
<script type="text/javascript" src='<%= this.ResolveClientUrl("~/greybox/AJS_fx.js") %>'></script>
<script type="text/javascript" src='<%= this.ResolveClientUrl("~/greybox/gb_scripts.js") %>'></script>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Step 3 : Create new page using above master page and start using GreyBox functions
Create a new aspx page using the masterpage.master and add some links and javascript code to it. Following are few examples describing the usage of GreyBox.
Example 1
A simple way to open a GreyBox popup window is to add rel attributes in the anchor tag.
<a href="Default.aspx" rel="gb_page_fs[]" title="GreyBox">Launch fullscreen window
Example 2
Following HTML code to open center popup window. In below example, OnClientClick event of the link button, javascript function OpenCenterWindow will be called.
<asp:LinkButton ID="btnCenterWindow" runat="server" Text="Launch center popup window"
OnClientClick="return OpenCenterWindow();">
Following JavaScript function can be used to open a center aligned GreyBox popup window.
GB_showCenter function will take arguments like caption, url, height, width,callback function etc. The Caption and URL are mandatory and all other parameters are optional. In case, height and width are not mention, then GreyBox will take the default height and with of the popup window.
function OpenCenterWindow() {
var caption = "Home";
var url = "../Default.aspx";
return GB_showCenter(caption, url, 400, 500)
}
Example 3
Following HTML code to open GreyBox popup window with callback function.
<asp:LinkButton ID="btnCenterWindowWithCallback" runat="server" Text="Launch center popup window with callback"
OnClientClick="return OpenCenterWindowCallBack();">
callback_fn is the optional parameter of the GB_showCenter method. When this function is specified, then callback_fn will be called during the close event of the popup window.
function OpenCenterWindowCallBack() {
var caption = "Home";
var url = "../Default.aspx";
return GB_showCenter(caption, url, 400, 500, callback_fn)
}
function callback_fn() {
alert('callback function');
}
Example 4
Following HTML code to call full screen popup window.
<asp:LinkButton ID="LinkButton1" runat="server" Text="Launch full screen popup window"
OnClientClick="return OpenFullScreenWindow();">
The code below will open GreyBox popup window in full screen. The width and height are adjusted according to the screen resolution.
function OpenFullScreenWindow() {
var caption = "Home";
var url = "../Default.aspx";
return GB_showFullScreen(caption, url, callback_fn)
}
Example 5
HTML Code to call image popup window
<table>
<tr>
<td>
<img src="Images/Chrysanthemum.jpg" alt="Flower" onclick="OpenImage(this.src);" width="100"
height="100" />
</td>
<td>
<img src="Images/Desert.jpg" alt="Desert" onclick="OpenImage(this.src);" width="100"
height="100" />
</td>
<td>
<img src="Images/Tulips.jpg" alt="Tulips" onclick="OpenImage(this.src);" width="100"
height="100" />
</td>
</tr>
</table>
<pre> <asp:LinkButton ID="LinkButton2" runat="server" Text="Launch ImageSet in
full screen popup window" OnClientClick="return OpenImageSet();"></asp:LinkButton>
GB_showImage function is used to open image popup window and GB_showImageSet function is used to open image gallery popup window. It takes image array as an parameter.
function OpenImage(url) {
var caption = "Home";
return GB_showImage(caption, url, callback_fn)
}
function OpenImageSet() {
var image_set = [{ 'caption': 'Flower', 'url': '../Images/Chrysanthemum.jpg' },
{ 'caption': 'Desert', 'url': '../Images/Desert.jpg' },
{ 'caption': 'Tulip', 'url': '../Images/Tulips.jpg'}];
return GB_showImageSet(image_set, 1);
}
Now putting all together in one page
Example.aspx
<%@ Page Language="C#" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="true"
CodeFile="Example.aspx.cs" Inherits="Example" Title="Untitled Page" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
<table>
<tr>
<td>
<a href="Default.aspx" title="GreyBox" rel="gb_page_fs[]">Launch fullscreen window</a>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="btnCenterWindow" runat="server" Text="Launch center popup window"
OnClientClick="return OpenCenterWindow();"></asp:LinkButton>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="btnCenterWindowWithCallback" runat="server" Text="Launch center popup window with callback"
OnClientClick="return OpenCenterWindowCallBack();"></asp:LinkButton>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="LinkButton1" runat="server" Text="Launch full screen popup window"
OnClientClick="return OpenFullScreenWindow();"></asp:LinkButton>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<img src="Images/Chrysanthemum.jpg" alt="Flower" onclick="OpenImage(this.src);" width="100"
height="100" />
</td>
<td>
<img src="Images/Desert.jpg" alt="Desert" onclick="OpenImage(this.src);" width="100"
height="100" />
</td>
<td>
<img src="Images/Tulips.jpg" alt="Tulips" onclick="OpenImage(this.src);" width="100"
height="100" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="LinkButton2" runat="server" Text="Launch ImageSet in
full screen popup window" OnClientClick="return OpenImageSet();"></asp:LinkButton>
</td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
function OpenCenterWindow() {
var caption = "Home";
var url = "../Default.aspx";
return GB_showCenter(caption, url, 400, 500)
}
function OpenCenterWindowCallBack() {
var caption = "Home";
var url = "../Default.aspx";
return GB_showCenter(caption, url, 400, 500, callback_fn)
}
function callback_fn() {
alert('callback function');
}
function OpenFullScreenWindow() {
var caption = "Home";
var url = "../Default.aspx";
return GB_showFullScreen(caption, url, callback_fn)
}
function OpenImage(url) {
var caption = "Home";
return GB_showImage(caption, url, callback_fn)
}
function OpenImageSet() {
var image_set = [{ 'caption': 'Flower', 'url': '../Images/Chrysanthemum.jpg' },
{ 'caption': 'Desert', 'url': '../Images/Desert.jpg' },
{ 'caption': 'Tulip', 'url': '../Images/Tulips.jpg'}];
return GB_showImageSet(image_set, 1);
}
</script>
</asp:Content> Points of Interest
- As this JavaScript popup window use iframe it is not blocked by popup
blocker.
- GreyBox library is very easy to setup and use.
- You can use
this JavaScript library for many more functionality like Showing external pages, AJAX uploading of files, AJAX
calls, Showing a video or a flash animation, Showing product information, Showing images etc.
Working with a leading custom software development company, iFour Technolab Pvt. Ltd.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
