Step 1: Download Greybox here and place it inside you js/ directory.
Step 2: Create your index.php file, with these codes inside:
<html>
<head>
<title>How To Refresh Greybox Parent Page</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">
<script language="javascript" type="text/javascript">
// we will use greybox' afterclose function to reload the parent page
// after closing the grebox pop up window
<!--
function afterclose() {
window.location.reload();
}
// -->
</script>
</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>
Textbox with default input:
<input name="sample_textbox" size="40" type="text" value="some predefined value" />
</body>
</html>
Step 3: Create your greybox pop up page which is greybox_pop_up.php with these codes inside:
<html>
<head>
<title>This is the greybox pop up</title>
<script type='text/javascript'>
function redirect_to_parent(){
parent.parent.window.location = "index.php";
parent.parent.GB_hide();
}
</script>
</head>
<body onunload="redirect_to_parent();"> <-- The important part -->
<h2>This is the greybox pop up window</h2>
<form>
<input type="button" value="Close This Window" onclick="parent.parent.GB_hide();">
</form>
</body>
</html>
Step 4: You should have this files by now:
 |
| Final files in this tutorial |
Step 5: Testing
- If you're gonna run index.php, you should see this in your browser:
 |
| Our index.php file |
- Change the predefined textbox value to any values you want, like the following:
 |
| Textbox with changed predefined value |
- Click the link to show the greybox pop up
 |
| Greybox pop up window |
- Close the pop up window, if the textbox value returned to "some predefined value", it means that the parent page was refreshed.
No comments:
Post a Comment