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.
Leave a Reply