Question

单击登录按钮时，会出现包含登录表单的fancybox。如果凭据正确，我想关闭fancybox并将父页面重定向到主页。我的问题是，fancybox没有关闭，重定向发生在fancybox内。此外，如果我选择取消，fancybox应该关闭，但会出现错误（$ .fancybox未定义）。我该怎么解决这个问题？顺便说一下，我正在使用codeigniter，jquery 1.10.2和fancybox 2.先谢谢。

这是我的父页面：

<a id='login' href=<?php echo site_url('login'); ?>>Login</a>
<script type="text/javascript">
  $(document).ready(function() {
     $('#login').bind('click', function(e) {
        $.fancybox({ 
                'width': '35%', 
                'height': '40%', 
                'type': 'iframe', 
                'href': '<?php echo site_url("login")?>',
                'modal': true
        }); 
        return false;
    });
});
</script>

登录控制器

public function index() {
    $this->session->set_userdata('page', 'guest');
    $this->load->view('login_view');
}

public function checkFields() {
    $config = array(.....);
    $this->form_validation->set_rules($config); 

    if($this->form_validation->run() == false){
        $this->load->view('login_view');
    }
    else{
        $userType = $this->input->post('userType');
        redirect($userType.'/home');
    }       
}

login_view fancybox

<?php echo form_open('login/checkFields'); ?>   
<div id='login_view' style='width: 30%; margin-left: 35%'>
    <div class="panel panel-default loginClass">
        <div class="fancy">
            <table class="details"  style='font-size: 14px; width:100%; margin-top: 5%'>
                <tr>
                    <td>Username </td>
                    <td><input name="username" id="username" type="text" class="form-control" required autofocus></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><input name="password" id="password" type="password" class="form-control" required> </td>
                </tr>

                <tr>
                    <td colspan="2" align="center"><a id="forgot_pw">Forgot Password?</a></td>
                </tr>
            </table>
            <center>
                <input type="submit" id="save" class="btn btn-default btn-primary" value="Login">
                <input type="button" id="cancel" class="btn btn-default" value="Cancel">
            </center>
        </div>
        <?php echo form_close(); ?>
    </div>

<script type="text/javascript">
$(document).ready(function() {
     $("#cancel").click(function() {
             $.fancybox.close();
     });
});
</script>

Answer 1

变化

$.fancybox.close();

到

parent.$.fancybox.close();

或强制重定向到父页面

parent.location.reload(true);

这将重新加载父页面，并且强制关闭fancybox。

Codeigniter：如何关闭fancybox并重定向父页面

1 个答案: