How To Use Greybox

Photo of Mike Dalisay
Modified Thursday, December 16, 2010
by - @ninjazhai
Greybox is another beautiful way not only to display your site contents or websites in a pop up window but also to do database operations in it. 

Image from

How To's.
*Comments on codes serves as its explanations.

Step 1: Download Greybox here.

Step 2: Create your js/ directory and place greybox in it.

Step 3: Create your index.php file and it should have the following codes in it:

          <title>How To Use Greybox</title>

          <script type="text/javascript">
               var GB_ROOT_DIR = "js/greybox/";
          <script src="js/greybox/AJS.js" type="text/javascript"></script>
          <script src="js/greybox/AJS_fx.js" type="text/javascript"></script>
          <script src="js/greybox/gb_scripts.js" type="text/javascript"></script>
          <link href="js/greybox/gb_styles.css" rel="stylesheet" type="text/css">       


     <b>This is the greybox parent window</b>
          <a href="greybox_pop_up.php" title="Greybox pop up" rel="gb_page_center[500, 500]">
               Click this link to greybox pop up

Step 4: Create your greybox_pop_up.php with these codes in it:

          <title>This is the greybox pop up</title>
     <h2>This is the greybox pop up window</h2>
Step 5: Run your index.php, click the link to test if greybox is working.

our index.php

Greybox pop up after clicking the "Show greybox pop up link"


You can do many things with greybox. It prevents you from the hassle of refreshing the whole page.

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.