Thursday, September 20, 2012

Login form in fancy box: Close and Refresh the parent page after submit the login form


*****************************************************
HTML Page
*****************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Page</title>
    <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
// stored in https://docs.google.com/open?id=0B3t3ir6gJardd21lOGFlMmZ3QVE
    <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
// stored in https://docs.google.com/open?id=0B3t3ir6gJardd21lOGFlMmZ3QVE
    <script type="text/javascript">
    $(document).ready(function() {
        $(".login-window").fancybox({
            'width'             : 300,
            'height'             : 180,
            'autoScale'       : false,
            'transitionIn'    : 'none',
            'transitionOut' : 'none',
            'type'               : 'iframe',
            'onClosed'        : function() {  
                            parent.location.reload(true);
                            ;}
        });
    });

</head>
<body>
</body>
<a href="fancy_login.php?" class ="login-window">Login</a>
</html>

*****************************************************
fancy_log.php
*****************************************************
<?php
if($_POST)  {
    $close_window = TRUE;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
// stored in https://docs.google.com/open?id=0B3t3ir6gJardd21lOGFlMmZ3QVE
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>// stored in https://docs.google.com/open?id=0B3t3ir6gJardd21lOGFlMmZ3QVE
<?php
if($close_window)  {
echo '<script type="text/javascript">
            $(function () {
                parent.$.fancybox.close();
            });
        </script>';
}
?>
<title> Login</title>
</head>

<body>
<form name="loginform" action="" method="POST">
    <table align="center">
        <tr>
            <th colspan="2">Login</th>
        </tr>
        <tr>
            <td>Username</td>
            <td><input type="text" name="username" />
            </td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="password" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="login" value="Login" /></td>
        </tr>
    </table>
</form>
</body>
</html>

No comments:

Post a Comment