How To Use Greybox

Last updated on July 26, 2021 by Mike Dalisay
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 http://orangoo.com
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:

 

<html>
<head>
<title>How To Use Greybox</title>

<script type="text/javascript">
var GB_ROOT_DIR = "js/greybox/";
</script>

<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">

</head>
<body>

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

</body>
</html>

 

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

 

 

<html>
<head>
<title>This is the greybox pop up</title>
</head>
<body>
<h2>This is the greybox pop up window</h2>
</body>
</html>

 

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”
 
Tips.
 
You can do many things with greybox. It prevents you from the hassle of refreshing the whole page.
 

By Mike Dalisay

Hi, I'm Mike Dalisay, a coder and startup founder. Thank you for visiting codeofaninja.com! I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on Twitter, LinkedIn, Facebook, and Instagram.

Back to top