Click here to Skip to main content
Click here to Skip to main content

Using GreyBox Popup Window in asp.net

, 16 Jan 2012
Rate this:
Please Sign up or sign in to vote.
Simple JavaScript popup window that doesn't suck and easy to use.

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 :

  1. Internet Explorer
  2. Firefox
  3. Safari
  4. Opera
  5. 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.

FolderStructure.png

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.

   //Center greybox 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.

 //Center grybox window with callback on close
        function OpenCenterWindowCallBack() {
            var caption = "Home";
            var url = "../Default.aspx";
            return GB_showCenter(caption, url, 400, 500, callback_fn)
        }
          //Callback function
        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.

  //Full screen greybox popup window
        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.

   //Greybox Image popup window
        function OpenImage(url) {
            var caption = "Home";
            return GB_showImage(caption, url, callback_fn)
        }
        //Greybox Image gallery popup window
        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);
        }        

ImageGalary.png

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">
        //Center greybox window
        function OpenCenterWindow() {
            var caption = "Home";
            var url = "../Default.aspx";
            return GB_showCenter(caption, url, 400, 500)
        }
        //Center grybox window with callback on close
        function OpenCenterWindowCallBack() {
            var caption = "Home";
            var url = "../Default.aspx";
            return GB_showCenter(caption, url, 400, 500, callback_fn)
        }
        //Callback function
        function callback_fn() {
            alert('callback function');
        }
        //Full screen greybox popup window
        function OpenFullScreenWindow() {
            var caption = "Home";
            var url = "../Default.aspx";
            return GB_showFullScreen(caption, url, callback_fn)
        }
        //Greybox Image popup window
        function OpenImage(url) {
            var caption = "Home";
            return GB_showImage(caption, url, callback_fn)
        }
        //Greybox Image gallery popup window
        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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Vinod Satapara
Software Developer (Senior)
India India
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralRe: Open GreyBox in"href" attribute PinmemberAngelina_ragazza16-Oct-12 0:05 
AnswerRe: Open GreyBox in"href" attribute PinmemberVinod Satapara16-Oct-12 2:18 
GeneralRe: Open GreyBox in"href" attribute PinmemberAngelina_ragazza17-Oct-12 7:55 
Questionproblem with jquery datapicker Pinmembermojtaba697-Oct-12 3:11 
hi
when i add this control library to my page , jquery datepicker don't work .
help me !
jquery datepicker link is 'jqueryui.com/demos/datepicker'
AnswerRe: problem with jquery datapicker PinmemberVinod Satapara7-Oct-12 19:17 
GeneralRe: problem with jquery datapicker Pinmembermojtaba697-Oct-12 22:00 
GeneralRe: problem with jquery datapicker PinmemberVinod Satapara8-Oct-12 2:49 
GeneralRe: problem with jquery datapicker PinmemberVipin.d2-Jan-14 1:39 
Questionasp.net using jquery Pinmemberpiyush_2233124-Apr-12 20:51 
AnswerRe: asp.net using jquery PinmemberVinod Satapara25-Apr-12 19:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140709.1 | Last Updated 16 Jan 2012
Article Copyright 2012 by Vinod Satapara
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid