Click here to Skip to main content
15,860,861 members
Articles / Web Development / HTML

Using GreyBox Popup Window in asp.net

Rate me:
Please Sign up or sign in to vote.
4.90/5 (9 votes)
16 Jan 2012CPOL4 min read 103.3K   10.8K   42   29
Simple JavaScript popup window that doesn't suck and easy to use.

Image 1

Image 2

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)


Written By
Technical Lead iFour Technolab Pvt Ltd
India India
Working with a leading custom software development company, iFour Technolab Pvt. Ltd.

Comments and Discussions

 
QuestionBrowser back button popup turning into white page without any html. Pin
funnydeveloper8-Dec-14 18:45
funnydeveloper8-Dec-14 18:45 
QuestionOpenImage not working Pin
marcverkade1-Oct-13 12:01
marcverkade1-Oct-13 12:01 
QuestionGray Box not rendering third Popup in my application Pin
Sandeep_sni26-Aug-13 22:47
Sandeep_sni26-Aug-13 22:47 
AnswerRe: Gray Box not rendering third Popup in my application Pin
Vinod Satapara26-Aug-13 23:02
Vinod Satapara26-Aug-13 23:02 
GeneralRe: Gray Box not rendering third Popup in my application Pin
Sandeep_sni26-Aug-13 23:07
Sandeep_sni26-Aug-13 23:07 
GeneralRe: Gray Box not rendering third Popup in my application Pin
Vinod Satapara26-Aug-13 23:33
Vinod Satapara26-Aug-13 23:33 
QuestionHow OpenImage and OpenImageset Pin
bw26723-Oct-12 20:56
bw26723-Oct-12 20:56 
QuestionRe: How OpenImage and OpenImageset Pin
Vinod Satapara24-Oct-12 19:05
Vinod Satapara24-Oct-12 19:05 
AnswerRe: How OpenImage and OpenImageset Pin
bw26729-Oct-12 18:48
bw26729-Oct-12 18:48 
QuestionOpen GreyBox in"href" attribute Pin
Angelina_ragazza15-Oct-12 15:07
Angelina_ragazza15-Oct-12 15:07 
AnswerRe: Open GreyBox in"href" attribute Pin
Vinod Satapara15-Oct-12 18:52
Vinod Satapara15-Oct-12 18:52 
GeneralRe: Open GreyBox in"href" attribute Pin
Angelina_ragazza16-Oct-12 0:05
Angelina_ragazza16-Oct-12 0:05 
AnswerRe: Open GreyBox in"href" attribute Pin
Vinod Satapara16-Oct-12 2:18
Vinod Satapara16-Oct-12 2:18 
GeneralRe: Open GreyBox in"href" attribute Pin
Angelina_ragazza17-Oct-12 7:55
Angelina_ragazza17-Oct-12 7:55 
Questionproblem with jquery datapicker Pin
mojtaba697-Oct-12 3:11
mojtaba697-Oct-12 3:11 
AnswerRe: problem with jquery datapicker Pin
Vinod Satapara7-Oct-12 19:17
Vinod Satapara7-Oct-12 19:17 
GeneralRe: problem with jquery datapicker Pin
mojtaba697-Oct-12 22:00
mojtaba697-Oct-12 22:00 
GeneralRe: problem with jquery datapicker Pin
Vinod Satapara8-Oct-12 2:49
Vinod Satapara8-Oct-12 2:49 
GeneralRe: problem with jquery datapicker Pin
Vipin.d2-Jan-14 1:39
Vipin.d2-Jan-14 1:39 
Questionasp.net using jquery Pin
piyush_2233124-Apr-12 20:51
piyush_2233124-Apr-12 20:51 
AnswerRe: asp.net using jquery Pin
Vinod Satapara25-Apr-12 19:24
Vinod Satapara25-Apr-12 19:24 
GeneralMy vote of 5 Pin
Member 186701217-Apr-12 3:53
Member 186701217-Apr-12 3:53 
GeneralRe: My vote of 5 Pin
Vinod Satapara17-Apr-12 18:32
Vinod Satapara17-Apr-12 18:32 
GeneralMy vote of 5 Pin
jackparsana15-Apr-12 23:59
jackparsana15-Apr-12 23:59 
GeneralRe: My vote of 5 Pin
Vinod Satapara16-Apr-12 7:28
Vinod Satapara16-Apr-12 7:28 

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

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