How To Use Greybox

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

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]

3 comments

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top